webpack获取图片的真实路径

HTML标签里的图片url

我们经常遇见的一种情况是：

1. 需要通过foo.js动态添加一个DOM，这个DOM里含有一个有图片路径的东西（比如是img标签）；
2. 假如foo.js在abc文件夹下，图片bar.png也在abc文件夹下；
3. 那么我们想当然的在img的src属性里，写了<img src="./bar.png"/>；
4. 然后报错说：http://xx.xx.xx.xx/bar.png not fount；
5. 解决办法是，参照以下示例：

// foo.jslet imgURL = require('./bar.png')let imgDOM = `<img src="${imgURL}"/>`

此时正常

css里的图片url

如果是例如在background-image:url()里写url，需要注意一点，图片的url是相对于css文件，准确的说，是有这个属性的文件的相对路径，而不是组件（即DOM所在文件）的相对路径。

static文件解决办法

一般来说，我们配置的脚手架可能有static文件夹。

效果是用作静态文件夹，注意，要脚手架或者是webpack配置才可以喔。

当把文件放在这个里面的时候，我们就可以通过/static/文件名来正确的获取到该文件了，可以无视相对路径。

给一个vue的webpack脚手架，可以直接使用。

vue-scaffold

说明：

vue的脚手架

安装

npm install
自带axios、less、vue、vue-router、vuex。

以及例如babel、eslint、webpack、热加载等，足以满足一般开发需要。

详细请阅读package.json

另外，因此是从我已有项目中摘抄出来，因此可能有一些遗漏的，我未删除的内容，如果在使用中发现了，请自行删除。