直接上内容

错误方法

<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