Question

vue.js在data中写了一个mydata对象，里面包含一个图片路径，怎样写才能成功加载图片。

vue.js在data中写了一个mydata对象，里面包含一个图片路径，怎样写才能成功加载图片，已使用过require.或者在src初写src="item.img"
如果不管我的写法，就单纯的实现每个myData数组元素中存一个图片和相关数据，在HTML中使图片能成功加载，到底该怎样做啊？最开始我的写法是这样的，但它只能加载第一个图片，后面的都加载不了了。 data:{
myData:[{
img:'../img/001.jpg',
name:'边境牧羊犬',
bigsmall:'中型犬',
descrip:'智商担当',

},
{
img:'../img/002.jpg',
html中 <img :src="item.img">





Answer 1

已经明白你的问题所在了。 可以参考下面的代码

// js代码
data:{
    myData: [{
        img: require('../img/001.png'), // require 是一个方法 不能放在 引号下面，否则获取不到url地址
        name: 'xxxx',
        bigsmall:'xxxxxx',
        descript: 'xxxxxx',
    }]
}

<!-- html代码 -->
<img :src="item.img" class="thumb">

你可以试一下， 有问题追评，希望可以帮到你

追问

照做了，还是不行啊

追答

img打包成base64了， 需要在 img标签里加上这样的。

你在控制台打印一下myData的值

<!-- html代码 -->
<img :src="'data:image/jpg;base64, ' + item.img" class="thumb">

追问

额，如果不管我的写法，就单纯的实现每个myData数组元素中存一个图片和相关数据，在HTML中使图片能成功加载，到底该怎样做啊？谢谢你，最开始我的写法是这样的，但它只能加载第一个图片，后面的都加载不了了。