初学vue+webpack,主要想实现一个拼图的效果。
<template>
<ul>
<li
v-for="item in puzzles">
<img v-bind:src="item"/>
</li>
</ul>
</template>
//script部分
export default {
data () {
return {
puzzles: []
}
},
methods: {
render(){
let puzzleArr = [],
i = 1
for (i; i <= 9; i++) {
puzzleArr.push("../assets/logo"+i+".png");
}
// 随机打乱数组
puzzleArr = puzzleArr.sort(() => {
return Math.random() - 0.5;
});
this.puzzles = puzzleArr;
}
webpack配置如下
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
一直报404的错误,应该是webpack没有找到图片。如果代码改为以下这种格式就没有问题,但是我需要随机排序,不能写死顺序,这种问题应该如何解决呢?
export default {
data () {
return {
puzzles: [{src: require('../assets/logo1.jpg')}...]
}
}
render()方法没有执行,puzzles数组没有数据,把打乱顺序那块写在computed里试下,或者在ready里执行render()
v-bind:src
是作用于运行时
的,简单来说就是绑定了一个属性,属性在程序运行过程中发生了变化,才会导致绑定src
发生变化,你上面的第一种写法,最终生成的html就是
<img src="../assets/logo1.png"/>
<img src="../assets/logo2.png"/>
<img src="../assets/logo3.png"/>
会404是正常的,因为webpack根本没有打包相应的图片
webpack完成的任务,实际上应该算编译时
就算不用
return {
puzzles: [{src: require('../assets/logo1.jpg')}...]
}
你把模板文件改成
<img src="../assets/logo1.jpg"/>
<img src="../assets/logo2.jpg"/>
<img src="../assets/logo3.jpg"/>
你会发现最终打包处理的模板会是
<img src="/path/to/your/image/logo1.hash.jpg"/>
<img src="/path/to/your/image/logo2.hash.jpg"/>
<img src="/path/to/your/image/logo.hash.jpg"/>
或是以base64编码的格式插入src中
<img src="data:image/jpg;base64......."/>
<img src="data:image/jpg;base64......."/>
<img src="data:image/jpg;base64......."/>
如果需要随机排序,感觉还是用require的方式,然后对puzzles数组洗乱一下就好了
js动态生成的路径无法被url-loader解析到,如果你去build,会发现图片甚至不会打包输出到dist目录(webpack是按需打包的)。
如果你是vue-cli初始化的项目,解决的办法:
第一步,把图片放到src同级的static目录(build/build.js文件中有一段代码是把static目录拷贝到dist/static的),比如图片放在static/a.png
第二步,js中使用/static/a.png去引用就行了。