Vue引入静态资源

Vue引入静态资源<a href="https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E5%A4%84%E7%90%86%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90">官方文档</a>&nbsp;

1、在js被导入或者在vue的template以及css中通过相对路径引入的,这样会被webpack处理

 2、放在public通过绝对路径引入,这类资源将会直接被拷贝 

引入图片示例 

1、相对路径引入

  

<img src="../assets/img/logo.png" />
//经过编译之后
<img src="data:image......." /> 

2、使用v-bind指令  

<img :src="require('../assets/img/logo.png')" />
<img :src="imgUrl" />
//在js定义imgUrl属性
imgUrl:'http://blog.phpfs.com/xxxx.png'

使用:src是v-bind:src的缩写,这样的是后面是可以写变量,注意如果变量是相对路径引入的图片,这样的也不会编译

3、使用绝对路径引入 

<img src="/static/img/icon.png" />
编译后
<img src="/static/img/icon.png" />

用绝对路径引入图片资源都会简单复制到编译后的目录中,不经过webpack处理。
Bookmark the permalink.

Comments are closed.