初学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')}...]
}
}
js动态生成的路径无法被url-loader解析到,如果你去build,会发现图片甚至不会打包输出到dist目录(webpack是按需打包的)。
如果你是vue-cli初始化的项目,解决的办法:
第一步,把图片放到src同级的static目录(build/build.js文件中有一段代码是把static目录拷贝到dist/static的),比如图片放在static/a.png
第二步,js中使用/static/a.png去引用就行了。