vue 中 img 绑定 src

1、刚开始,把images文件夹放在common 文件夹下,一直使用相对路径,没有涉及动态绑定 src 问题,图片都能显示,当需要动态绑定时,图片不显示。

vue 中 img 绑定 src

 2、当把图片放置static文件夹下,图片都显示

vue 中 img 绑定 src

3、当把图片放置static文件夹下,图片都显示

vue 中 img 绑定 src

4、总结 

webpack处理静态资源时,在*.vue组件中,所有的templates和css都会被vue-html-loader 和 css-loader解析,寻找资源的URL。所有的相对资源路径,都会被Webpack解析成模块依赖,会被一个基于你的Webpack输出配置自动生成的URL替代 。

在static/下的文件都不会被Webpack处理,它们使用相同的文件名,直接拷贝到最终的路径。但是在static中使用绝对路径来引用这些文件,才会不被webpack处理,如果使用相对路径,依然会被webpack处理。