Vue.js 동적 그림 표시 기능이 실패합니다.
<p>저는 vue.js 초보자이고 이미지를 동적으로 표시하려고 하는데 동적 표시에 문제가 있습니다. 수동으로 변경하면 제대로 작동합니다. 약간의 차이점이 있지만 유사한 질문을 많이 찾았지만 그 중 어느 것도 도움이 되지 않았습니다. </p>
<p>내 구조는 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;">-src
--자산
---피자
----피자-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(restaurant.name, 레스토랑.mainImage)"/>
</div>
기본값 내보내기 {
이름: "레스토랑",
데이터() {
반품 {
RestInfo: this.$attrs.restData,
};
},
방법: {
getImage(폴더 이름, 이미지 이름) {
이미지 = 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>
