vue 动态 src 路径 问题 引发的 思考

1我们在vue中使用图片大概有以下几种姿势

1 在vue的template中 引用 属于静态引用 一般不会有什么问题
2 在vue的css中 引用 background: url(../../../assets/imgs/close.png) 0 0 no-repeat; 属于静态引用 一般不会有什么问题
3 在template中动态引用 此处场景举例： 在for循环中 动态引用图片，根据server返回的不同的文件名来确定用不同的图片 属于动态引用一般会出问题

那么，vue/webpack 中的图片到底是如何引用的呢（补充一些基础知识）

首先 npm run dev
webpack其实是把我们代码编译到内存中运行，而不是直接跑的源码
关于图片的引用可以 查看

// url-loader配置
// build/webpck.base.conf.js
{
  test: /.(png|jpe?g|gif|svg)(?.*)?$/,
  loader: 'url-loader',
  query: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

以上代码的意思是 如果图片小鱼10000b 就打成base64 否则 打包放进【当前目录】下的static/img/下 并且引用的图片的名字 改为 原来的图片名字+hash值+后缀名
当前目录：打包后的目录一般是dist目录下对应的js目录，而不是src目录

解决办法 两种

利用static目录 ，而不是把图片放到别的地方，比如你自己新建一个img文件夹，在动态引用是无效的

js动态生成的路径无法被url-loader解析到，如果你去build，会发现图片甚至不会打包输出到dist目录（webpack是按需打包的）。

如果你是vue-cli初始化的项目，解决的办法：
第一步，把图片放到src同级的static目录（build/build.js文件中有一段代码是把static目录拷贝到dist/static的），比如图片放在static/a.png
第二步，js中使用/static/a.png去引用就行了。

粗暴引用 我就是想把图片放到我想放的任意地方，就不放到根目录下的static 怎么办，就是动态引用路径的时候直接静态引用图片

在 build下dev-server.js中
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
可以看出 ./static 被静态化了
assetsPublicPath = /
assetsSubDirectory = static
所以
staticpath = /static
这里有个取巧的地方就是 源码根目录下有个static文件夹， 打包后的dist目录下的静态文件夹也叫做static

比如我们的图片资源放到src下的assets下 那么我们只需要加上下面这行
app.use(staticPath, express.static('./src/assets')) 相当于 把 src/assets 这个目录 静态化 并映射到ip:port/static 下

可能有点问题
还有一点需要注意的是 当服务器运行起来，根目录下有个static文件夹，
那么我们通过 绝对路径访问 /static 没问题
相对路径 访问 ./static/ ../../static/ ../../../static 如果你按照正常相对路径向上层级跳转 是没问题的，此时相当于你是实际要访问这个目录
可是如果你多跳了，不如 static 在你的上两级 ，而 你../../../../static 了四次，那么也是没问题的，因为此时服务器认为你要访问的是 它代理的目录