Vue v-forと:src 画像を表示させたい。
解決したいこと
Vueを使ってwebアプリをつぃくっています。
v-forとdata内に作ったlogs配列の中のパスを使って、画像を表示させたいです。
しかし、
Failed to load resource: the server responded with a status of 404 (Not Found)
と検証ツールのコンソールに出て、画像表示ができません。
コンソールでは、srcに、dataに書いたパスがそのまま表示されていて、コンパイル時にうまく処理されていないようである。
発生している問題・エラー
Failed to load resource: the server responded with a status of 404 (Not Found)
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
template
<div v-for="(log, i) in logs" :key="i">
<img :src="log.photo" />
<div >{{ log.name }}</div>
</div>
script
<script>
export default {
data: function () {
return {
logs: [
{
photo: "../lists/No.1.png",
name: "あいうえお",
},
{
photo: "../lists/No.2.jpg",
name: "かきくけこ",
},
],
}
},
</script>
自分で試したこと
パスは何度も確認し、階層や、スペルミスがないことを確認した。（listsファイルは、srcにはいっている。）
一度listファイルをpublicにうつして、もう一度srcに戻したらなぜか一度治った。しかし、いったんブラウザを閉じて、もう一度npm run serveするとエラーが再び出た。
ネットですらべ手、requireを使うと書いてあったので、
<div v-for="(log, i) in logs" :key="i">
<img :src="require(log.photo)" />
<div >{{ log.name }}</div>
</div>
としてみたが駄目だった。
解決策を教えていただきたいです。
0
