图片 展示 网站模板,上海城乡住房建设厅网站,公司装修怎么样,wordpress教程文档不报错且f12查看元素的时候#xff0c;显示的src说明已经渲染到html的src上#xff0c;但是就是不显示在页面上
原因
在vue上#xff0c;动态渲染静态图片资源#xff08;比如从assets文件夹加载的图片#xff09;需要注意打包工具对静态资源的解析方式
由于vue2的脚手…
不报错且f12查看元素的时候显示的src说明已经渲染到html的src上但是就是不显示在页面上
原因
在vue上动态渲染静态图片资源比如从assets文件夹加载的图片需要注意打包工具对静态资源的解析方式
由于vue2的脚手架工具是vue-cil而vue-cil的底层是基于webpackvue3的脚手架工具是create-vuecreate-vue的底层是基于vite所以两者的底层打包工具不一样相应的对静态资源的解析方式也不一样
vue2解决办法
方法一
需要require动态加载静态资源
templatedivdiv v-for(item, index) in images :keyindeximg :srcgetImagePath(item) altimage/div/div
/templatescript
export default {data() {return {images: [image1.png, image2.png, image3.png], // 图片文件名};},methods: {getImagePath(image) {// 使用 require 加载图片资源return require(/assets/images/${image});},},
};
/script方法二
使用webpack提供的静态资源路径解析~
templatedivdiv v-for(item, index) in images :keyindeximg :src~/assets/images/${item} altimage/div/div
/templatescript
export default {data() {return {images: [image1.png, image2.png, image3.png],};},
};
/scriptvue3解决办法
如果你的项目是通过vite创建的vue3项目的话应该使用vite提供的静态资源载入方法 requie是webpack提供的一种加载能力所以vite不能用require方法 方法一
使用new URL( , import.meta.url).href
templatedivdiv v-for(item, index) in images :keyindeximg :srcgetImagePath(item) altimage/div/div
/templatescript
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方法二
如果路径是动态拼接的可以直接在模板中拼接路径
templatedivdiv v-for(item, index) in images :keyindeximg :src/src/assets/images/${item} altimage/div/div
/templatescript
export default {data() {return {images: [image1.png, image2.png, image3.png],};},
};
/script
