我是vue.js的新手,并尝试使用v-for
指令渲染图像列表。相反,我得到the server responded with a status of 404 (Not Found)
。我正在使用template生成的vue-cli。
webpack网址加载器应该将与item.src
对应的图片的网址更改为某种[name].[ext]?[hash]
格式,但它只是让它们一个人(实际上结果网址是http://localhost:8080/assets/computer.jpg
)。
这是我的代码:
<template>
<h2 class="ui header">
<div class="content">
Recent Research
<div class="sub header">
recent research issue
</div>
</div>
</h2>
<div v-for="item in items" class="ui three column centered grid">
<div class="column">
<img class="ui centered medium image" :src="item.src" />
<h3 class="ui header">{{item.text}}</h3>
<p class="teal meta">{{item.extra}}</p>
</div>
</div>
</template>
<script>
export
default {
data() {
return {
items: [{
src: '../assets/computer.jpg',
text: 'fundamentals of search engine',
extra: 'with Google'
}, {
src: '../assets/computer.jpg',
text: 'fundamentals of search engine',
extra: 'with Google'
}, {
src: '../assets/computer.jpg',
text: 'fundamentals of search engine',
extra: 'with Google'
}, {
src: '../assets/computer.jpg',
text: 'fundamentals of search engine',
extra: 'with Google'
}, {
src: '../assets/computer.jpg',
text: 'fundamentals of search engine',
extra: 'with Google'
}, {
src: '../assets/computer.jpg',
text: 'fundamentals of search engine',
extra: 'with Google'
},
]
}
}
}
</script>
相关的webpack配置。
var path = require('path')
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, '../dist/static'),
publicPath: '/static/',
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue'],
alias: {
'src': path.resolve(__dirname, '../src')
}
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue'
}, {
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
test: /\.json$/,
loader: 'json'
}, {
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
name: '[name].[ext]?[hash]'
}
}]
},
vue: {
loaders: {
js: 'babel'
}
}
/*
eslint: {
formatter: require('eslint-friendly-formatter')
}
*/
}
答案 0 :(得分:10)
您正在将字符串传递给&#39; src&#39;您的items数组的字段,webpack无法判断该字符串是否为资源。
我建议您尝试将其更改为:
items: [{
src: require('../assets/computer.jpg'),
text: 'fundamentals of search engine',
extra: 'with Google'
}, {
....
这样输出可以由webpack处理。