• 起因：动态图片会自动拼接根路径，为了方便图片要放在public下
• 解决：使用require引入图片资源
• 注意：不能动态路径中使用require，如<img :src="require(…/assets/${item.imgUrl})" alt="" />{{ item.title }}。在Vue CLI创建的项目中，Webpack默认会对require进行解析，但是在动态路径中使用require时，Webpack可能无法正确解析路径。
• 正确：

<template><div class="box"><div v-for="item in dataList" :key="item.title"><img :src="getImage(item.imgUrl)" alt="" />{{ item.title }}</div></div>
</template><script>
export default {data() {return {dataList: [{imgUrl: "1jpeg.jpeg",title: "你好",},{imgUrl: "2jpeg.jpeg",title: "我不好",},],};},methods: {getImage(imgUrl) {return require(`../assets/${imgUrl}`);},},
};
</script>