vue-cli4 v-for 绑定图片地址,显示无效
代码: <li v-for='item in productList' :key='item.Id'> <p>id:pw_item.Id</p> <p><router-link to="/productDetail">pw_item.ProductName</router-link></p> <p>pw_item.price</p> <p><img :src="item.img" alt=''></p> </li> productList: [{ Id: 4, ProductName: 'mac', price: 18990, img: '../assets/img/mac.jpg' }, { Id: 5, ProductName: 'thindpad', price: 11990, img:'../assets/img/thinkpad.jpg' }, { Id: 6, ProductName: 'surface', price: 12990, img: '../assets/img/surface.jpg' }] 原因: 通过v-bind 绑定img的src属性不能直接写路径 ,要用require导入,改为require即可正常显示 代码如下: productList: [{ Id: 4, ProductName: 'mac', price: 18990, img: require('../assets/img/mac.jpg') }, { Id: 5, ProductName: 'thindpad', price: 11990, img: require('../assets/img/thinkpad.jpg') }, { Id: 6, ProductName: 'surface', price: 12990, img: require('../assets/img/surface.jpg') }] |
|
|