HTML标签里的图片url
我们经常遇见的一种情况是:
- 需要通过
foo.js
动态添加一个DOM,这个DOM里含有一个有图片路径的东西(比如是img标签); - 假如
foo.js
在abc
文件夹下,图片bar.png
也在abc
文件夹下; - 那么我们想当然的在img的src属性里,写了
<img src="./bar.png"/>
; - 然后报错说:
http://xx.xx.xx.xx/bar.png not fount
; - 解决办法是,参照以下示例:
// foo.js
let 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的脚手架
安装
npm install
自带axios、less、vue、vue-router、vuex。以及例如babel、eslint、webpack、热加载等,足以满足一般开发需要。
详细请阅读package.json
另外,因此是从我已有项目中摘抄出来,因此可能有一些遗漏的,我未删除的内容,如果在使用中发现了,请自行删除。