而当我们把这些资源放入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')">