VUE坑（3）static文件夹中图片动态加载的问题

下图是我的文件路径

我想在 vue component 中访问 static 下的 images 中的，

可以这样

xxx 代表的索引，就可以动态更新了

但是如果较多，这种方法 *** 作还是有点复杂

可以采用统一加载的方法

在 static 文件下加一个 imgjson 文件

内容如下

然后在 component 中引入，并在 data 中注册，就可以直接用了。并且上传到 github 也能直接预览到

assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”/logopng”>和background:url(/logopng),”/logopng”是相对资源路径，将有webpack解析为模块依赖

static：在这个目录下文件不会被webpack处理，简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，这是通过configjs文件中的buildassetsPublic和buildassertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用：/static[filename]

根据webpack的特性，总的来说就是static放不会变动的，第三档的文件，asserts放可能会变动的文件。

首先，vue项目有两个地方可以存放静态资源。一个是assets文件夹，一个是static文件夹（地址栏输入static可以直接访问）。放到static里面webpack打包后只会把资源复制到发布目录而不会把小优化为base64。而assets内的资源会被webpack打包,比如,会被转为BASE64。为了兼顾资源优化，所以还是不适合把资源放到static。

而当我们把这些资源放入assets文件夹时，当引入的是背景时，会报错。

这个时候，还需配置 build => utiljs 里找到 ExtractTextPluginextract 增加一行： publicPath: '//' ，主要解决背景路径的问题。

这样改动的原因是Vue打包完成的目录结构中，js/css文件与static目录的层级差了2级

以上就是关于VUE坑（3）static文件夹中图片动态加载的问题全部的内容，包括:VUE坑（3）static文件夹中图片动态加载的问题、vue中，图片<img src="path"/>如何加载绝对路径的图片例如：D:/photo/fileName、vue项目静态资源(图片,字体)引用路径正确姿势等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！