vue中动态渲染静态图片资源

不报错且f12查看元素的时候，显示的src说明已经渲染到html的src上，但是就是不显示在页面上

原因

在vue上，动态渲染静态图片资源（比如从assets文件夹加载的图片）需要注意打包工具对静态资源的解析方式

由于vue2的脚手架工具是vue-cil，而vue-cil的底层是基于webpack，vue3的脚手架工具是create-vue，create-vue的底层是基于vite，所以两者的底层打包工具不一样，相应的对静态资源的解析方式也不一样

vue2解决办法

方法一

需要require动态加载静态资源

<template><div><div v-for="(item, index) in images" :key="index"><img :src="getImagePath(item)" alt="image"></div></div>
</template><script>
export default {data() {return {images: ['image1.png', 'image2.png', 'image3.png'], // 图片文件名};},methods: {getImagePath(image) {// 使用 require 加载图片资源return require(`@/assets/images/${image}`);},},
};
</script>

方法二

使用webpack提供的静态资源路径解析~

<template><div><div v-for="(item, index) in images" :key="index"><img :src="`~@/assets/images/${item}`" alt="image"></div></div>
</template><script>
export default {data() {return {images: ['image1.png', 'image2.png', 'image3.png'],};},
};
</script>

vue3解决办法

如果你的项目是通过vite创建的vue3项目的话，应该使用vite提供的静态资源载入方法

requie是webpack提供的一种加载能力，所以vite不能用require方法

方法一

使用new URL(`   `, import.meta.url).href

<template><div><div v-for="(item, index) in images" :key="index"><img :src="getImagePath(item)" alt="image"></div></div>
</template><script>
export default {data() {return {images: ['image1.png', 'image2.png', 'image3.png'],};},methods: {getImagePath(image) {// 使用 new URL 加载图片资源return new URL(`../assets/images/${image}`, import.meta.url).href;},},
};
</script>

方法二

如果路径是动态拼接的，可以直接在模板中拼接路径

<template><div><div v-for="(item, index) in images" :key="index"><img :src="`/src/assets/images/${item}`" alt="image"></div></div>
</template><script>
export default {data() {return {images: ['image1.png', 'image2.png', 'image3.png'],};},
};
</script>