VUE002. 动态使用webpack打包处理后的静态图片路径（{ img: require('xxx.png') }）

案例摘要

需求是通过v-for循环渲染数组中数据，其中包括本地包的图片文件。话不多说直接上代码：

<a-radio-group class="template-radio">
　　<a-radio-button v-for="(item, index) in templateList" :key="index" :value="item.id">
　　　　<a-row>
　　　　　　<a-col :span="24">
　　　　　　　　<img :src="item.img">
　　　　　　</a-col>
　　　　</a-row>
　　　　<a-row>
　　　　　　<a-col :span="24">
　　　　　　　　<span>{{ item.title }}</span>
　　　　　　　　<span>{{ item.description }}</span>
　　　　　　</a-col>
　　　　</a-row>
　　</a-radio-button>
</a-radio-group>    

templateList: [
　　{
　　　　id: 1,
　　　　img: './img/thumb_001.png',
　　　　title: '标题',
　　　　description: '描述信息。'
　　},
]

 

嫌疑人Webpack

由于Webpack会对本地包文件打包处理，对名称改变。

可以明确看到原本静态的图片路径经过打包的路径多了一段  .a116441b  在项目中每次部署都要进行打包操作，而且开发、测试和线上环境都不同，都要打包，我们无法直接写入这段打包标识。难道为了几张缩略图要放弃v-for？

 

 

解决方案

由于是webpack在作祟，所以要彻底解决我们只能从根本上下手，改变它的配置，网上已经有很多操作方法这里不在描述。

这里要说的是不影响全局配置，只完成部分图片文件实现动态路径的方法：

用  require( )  包裹，通过该方法解析图片的路径，再将加载解析后的路径填充至 img元素 的 src属性 中。

 

* 此方法只建议用于少量像素较大的本地包图片，多张像素较小的图片可以制成雪碧图使用静态路径通过CSS裁剪渲染。

 

 

- END -