4
Я новичок в vue.js и пытаюсь отобразить список изображений, используя директиву v-for. Вместо этого я получаю the server responded with a status of 404 (Not Found). Я использую template, сгенерированный vue-cli.image src get 404 error with vuejs
WebPack URL-загрузчик должен изменить URL изображения, соответствующий item.src в какой-то формат [name].[ext]?[hash], но это просто оставить их в покое (на самом деле результатом URL является http://localhost:8080/assets/computer.jpg).
И вот мой код:
<template>
<h2 class="ui header">
\t \t <div class="content">
\t \t \t Recent Research
\t \t \t <div class="sub header">
\t \t \t \t recent research issue
\t \t \t </div>
\t \t </div>
\t </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')
}
*/
}
Если 404 статус возвращается из изображений, то проверьте URL-адрес изображения и измените его соответствующим образом, если это неверно, имейте в виду, что item.src должен относиться к вашему домену, а не к текущему файлу .js – Reda
Правильный URL-адрес запроса , Возможно, что-то не так с процессом склеивания webpack. URL-адрес загрузчика webpack просто оставляет URL-адрес, соответствующий только item.src (на самом деле URL-адрес результата - это «http: // localhost: 8080/assets/computer.jpg»), в то время как он должен изменить URL-адрес некоторому '[name ]. [ext]? [hash] '. –