Vue之assets图片加载不出来
说明assets和static连个文件都是存放静态资源的目录在html下使用它们是无差别的,但是在js中使用的话,assets中资源的路径要经过webpack中file-loader编译,不能直接写。而static中的文件,不会经过编译,项目在经过打包后,会生成dist文件夹,static中的文件只是复制一遍而已。二者中的图片资源,html页面可以直接使用;但在动态循环绑定中,assets路径的图
·
说明
assets和static连个文件都是存放静态资源的目录
在html下使用它们是无差别的,但是在js中使用的话,assets中资源的路径要经过webpack中file-loader编译,而static中的文件,不会经过编译
二者中的图片资源,html页面可以直接使用;但在动态循环绑定中,assets路径的图片会加载失败,因为webpack使用的是commenJS规范,必须使用require才可以。
解决
一、图片在assets目录下
使用require()
img:[
{imageUrl:require('../assets/2.png')},
{imageUrl:require('../assets/3.png')},
]
二、将图片放到static目录下
img:[
{imageUrl:'static/img/1.png'},
{imageUrl:'static/img/2.png')},
{imageUrl:'static/img/3.png'},
]
更多推荐
已为社区贡献8条内容
所有评论(0)