问题描述:做聊天表情时,表情图片放在assets目录中,读取数组动态显示图片时发现图片显示不出来,但是如果是在src=""这里是写死的字符串是能显示的
如下图:第一个img可以显示,第二个不行(变量的路径是没错的,一样的路径)
<div class="face-item" v-for="(item,index) in emotionList" @click="clickEmoticon(item.src, item.sign)" :key="index" :title="item.desc">
<img src="../assets/images/logo.png">
<img :src="item.src">
</div>
问题:发现是assets目录下的图片,需要使用require()进行包裹的处理的,于是如下:
<img :name="item.desc" :src="require('../assets/images/logo.png')">
发现还是不行,这里没想明白,后来百度发现说require中不能用变量,只能是字符串。。。,很难受。
这里尝试了2种办法可以:
法一:在定义数组变量这里就用require包裹(require(xx)返回的值是一个base64的数值),然后页面显示直接不变,用:src="item.src"
let EMOTION_LIST = [
{
"src": require("../assets/images/emoji/0000.gif"),
"sign": "[emoji_0000.gif]"
},
{
"src": require("../assets/images/emoji/0001.gif"),
"sign": "[emoji_0001.gif]"
}
]
法二:数组对象中只留了文件名,把前面的路径和后缀都剪掉了,然后在拼接起来,不知道这样为什么就可以,反正是能正常显示的
<img :src="getSrc(item.src)">
......
methods: {
getSrc(src){
return "../assets/images/emoji/" + src + ".gif"
}
}
let EMOTION_LIST = [
{
"src": "0000",
"sign": "[emoji_0000.gif]"
},
{
"src": "0001",
"sign": "[emoji_0001.gif]"
}
]
记录一下~