@H_502_0@首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助
@H_502_0@ assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如<
img src=”./logo.png”>
和background:url(./logo.png)
,”./logo.png”是相对资源路径,将有webpack解析为模块依赖static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过config.js文件中的
build.assetsPublic
和build.assertsSubDirectory
链接来确定的。任何放在static/中文件需要以绝对路径的形式引用:/static[filename]根据webpack的特性,总的来说就是static放不会变动的,第三档的文件,asserts放可能会变动的文件
@H_502_0@问题来了,用js动态加载assets或者本文件的图片出现404的状态码
@H_502_0@
代码实例
<div class="jb51code">
<pre class="brush:js;">
<li v-for="(item,index) in images" :key="index">
<img :src="item.src">
//js部分
data(){
return {
images:[{src:'./1.png'},{./2.png}]
}
}