直接上内容
错误方法
<template>
<div>
<img v-for= "item in toDoListDate" :key = "item.id" :src="item.imgSrc">
<div>
</template>
<script>
export default{
}
data() {
return {
toDoListDate: [
{ id: 1, name: '即将响应超时', number: 20, imgSrc: '../common/img/group1.webp' },
{ id: 2, name: '即将完成超时', number: 21, imgSrc: '../common/img/group2.webp' },
],
};
},
</script>
这种做法拿不到本地图片
解决方法如下,在导入路径时使用 require
<template>
<div>
<img v-for= "item in toDoListDate" :key = "item.id" :src="item.imgSrc">
<div>
</template>
<script>
export default{
}
data() {
return {
toDoListDate: [
{
id: 1,
name: '即将响应超时',
number: 20,
imgSrc:require ('../common/img/group1.webp')
},
{
id: 2,
name: '即将完成超时',
number: 21, imgSrc: require('../common/img/group2.webp')
},
],
};
},
</script>
这样即可显示
如果还不显示并且,网页查找元素显示[object module]
则:加 default 即可
require ('../common/img/group1.webp').default