Vue.jsの動的画像表示機能が失敗する
<p>私は vue.js の初心者で、画像を動的に表示しようとしていますが、動的表示に問題があります。手動で変更すると正常に機能します。いくつかの違いはあるものの、似たような質問をたくさん見つけましたが、どれも役に立ちませんでした。 </p>
<p>これは私の構造です: </p>
<pre class="brush:php;toolbar:false;">-src
--assets
- -ピザ
----ピザ-1.jpg
----ピザ-2.jpg
- -ハンバーガー
----ハンバーガー-1.jpg
----ハンバーガー-2.jpg
- -フライドポテト
----フライドポテト-1.jpg
----フライドポテト-2.jpg
--コンポーネント
--DBjson
---main.json</pre>
<p>次のループを作成しようとしています: </p>
<pre class="brush:php;toolbar:false;">`<div class="holder" v-for="レストラン内のレストラン">
<img :src="getImage(レストラン名, レストラン.メインイメージ)"/>
</div>
デフォルトのエクスポート {
名前：「レストラン」、
データ（） {
戻る {
restInfo: this.$attrs.restData,
};
}、
メソッド: {
getImage(フォルダ名, 画像名) {
let image = require.context("@/assets/");
return image("./" フォルダ名 "/" 画像名);
}、
}、
};`</pre>
<p>私の JSON ファイル: </p>
<pre class="brush:php;toolbar:false;">{
「id」: 1、
"名前": "ピザ",
"価格": "10ドル",
"mainImage": "ピザ-1.jpg",
"画像": ["ピザ-2.jpg", "ピザ-1.jpg"],
},</pre>
