vue项目静态资源(图片,字体)引用路径正确姿势

JavaScript040

vue项目静态资源(图片,字体)引用路径正确姿势,第1张

首先,vue项目有两个地方可以存放静态资源。一个是assets文件夹,一个是static文件夹(地址栏输入static可以直接访问)。放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。而assets内的资源会被webpack打包,比如图片,会被转为BASE64。为了兼顾图片资源优化,所以还是不适合把图片资源放到static。

而当我们把这些资源放入assets文件夹时,当引入的图片是背景图片时,会报错。

这个时候,还需配置 build =>util.js 里找到 ExtractTextPlugin.extract 增加一行: publicPath: '../../' ,主要解决背景图片路径的问题。

这样改动的原因是Vue打包完成的目录结构中,js/css文件与static目录的层级差了2级

Vue.js可以使用组件实现不规则图片的弹出,可以使用Vue-Cli来安装Vue.js,然后在项目中添加组件文件,在组件中实现不规则图片的弹出,可以使用CSS3的transform属性来实现不规则图片的弹出效果。

原因:因为动态添加src被当做静态资源处理了,没有进行编译,所以要加上require。

使用require定义之后,你就可以动态使用了,不用require你就只能写死的。

用 :src="'../img/image.jpg'" 找不到图片地址

<img src="../img/image.jpg">// 正常加载

如何使用require:

src1:require('../img/image1.jpg'),

src2:require('../img/image2.jpg'),

index: 1,

<img :src="index = 0 ? src1: src2">// 动态地址,正常加载

或者 <img :src="require('../../../assets/'+item.name+'_icon.png')">