[前端]vue-cli4 v-for 绑定图片地址，显示无效

楼主^#

更多发布于：2020-05-26 16:31

vue-cli4 v-for 绑定图片地址，显示无效
代码：

&lt;li v-for='item in productList' :key='item.Id'&gt;
            &lt;p&gt;id:pw_item.Id&lt;/p&gt;
            &lt;p&gt;&lt;router-link to="/productDetail"&gt;pw_item.ProductName&lt;/router-link&gt;&lt;/p&gt;
            &lt;p&gt;pw_item.price&lt;/p&gt;
          &lt;p&gt;&lt;img :src="item.img" alt=''&gt;&lt;/p&gt;
        &lt;/li&gt;

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')
      }]

喜欢0

知识需要管理，知识需要分享

发帖回复

« 返回列表

您需要登录后才可以回帖，登录或者注册

返回顶部

公众号

[前端]vue-cli4 v-for 绑定图片地址，显示无效

最新喜欢：