루프 Vue.js에 이미지가 표시되지 않음 [중복]
을 사용하여 루프에서 9 개의 다른 이미지를 표시하려고합니다 v-for.
그러나 그들은 표시되지 않습니다. 루프없이 보여 주면 작동합니다.
올바른 리소스를 추출하고 있지만 여전히 표시되지 않습니다.
이것은 내 코드입니다.
<img class="list-complete-img" src="../assets/g1.jpg" alt="" /> //This works
<div v-for="item in data.items" :key="item.id">
<div>
{{ item.src }} // Just to check if I am printing right
</div>
<img class="list-complete-img" :src="item.src" :alt="item.src" /> // This does not work
</div>
이제 내가 얻는 결과는 다음과 같습니다.
이것은 내 data.json:
"items": [
{ "id": "1", "src": "../assets/g1.jpg", "tags": ["all", "tag1"] },
{ "id": "2", "src": "../assets/g2.png", "tags": ["all", "tag2"] },
{ "id": "3", "src": "../assets/g3.png", "tags": ["all", "tag2"] },
{ "id": "4", "src": "../assets/g4.png", "tags": ["all", "tag1"] },
{ "id": "5", "src": "../assets/g5.png", "tags": ["all", "tag1"] },
{ "id": "6", "src": "../assets/g6.png", "tags": ["all", "tag2"] },
{ "id": "7", "src": "../assets/g7.jpg", "tags": ["all", "tag1"] },
{ "id": "8", "src": "../assets/g8.png", "tags": ["all", "tag2"] },
{ "id": "9", "src": "../assets/g9.png", "tags": ["all", "tag2"] }
]
편집하다
지금까지 문제가 src. 이미지 링크를 사용하는 경우 정상적으로 작동합니다. 그러나 로컬 이미지가 아닙니다 (루프에서 로컬 이미지를 많이 사용하고 단일에서 잘 작동하는 경우에만). 그래서 제가 할 수있는 것은 여기에 파일 디렉토리를 넣는 것입니다. 누구든지 로컬 컴퓨터에서 시도해보고 파일 디렉토리의 이미지를 루프로 업로드하고 여기에 게시 할 수 있다면 권장합니다.
해결
정확히이 명령문이 필요했습니다 : require, 경로 디렉토리 및 이미지 이름.
<div v-for="item in items" :key="item.id">
<div>
{{ item.src }}
</div>
<img
class="list-complete-img"
:src="require(`../assets/${item.src}`)"
:alt="item.src"
/>
</div>
답변
이것은 여기 에서 찾을 수있는 Evan You의 다음 인용문과 관련이 있습니다 .
imagePath는 런타임에 Vue에 의해서만 렌더링되기 때문에 Webpack은 그것을 다시 쓸 기회가 없습니다.
귀하의 JavaScript코드는 다음과 같이되어야합니다 :
export default {
name: "App",
data: function () {
return {
items: [
{ id: "1", src: "logo.png", tags: ["all", "tag1"] },
{ id: "2", src: "logo.png", tags: ["all", "tag2"] },
{ id: "3", src: "logo.png", tags: ["all", "tag2"] },
{ id: "4", src: "logo.png", tags: ["all", "tag1"] },
{ id: "5", src: "logo.png", tags: ["all", "tag1"] },
{ id: "6", src: "logo.png", tags: ["all", "tag2"] },
{ id: "7", src: "logo.png", tags: ["all", "tag1"] },
{ id: "8", src: "logo.png", tags: ["all", "tag2"] },
{ id: "9", src: "logo.png", tags: ["all", "tag2"] },
],
};
},
methods: {
getImgUrl: function (imagePath) {
return require('@/assets/' + imagePath);
}
}
};
그 후에 getImgUrl파일 이름을 전달 하여 함수 를 호출해야 합니다. 당신 HTML은 다음과 같이 될 것입니다 :
<div id="app">
<img class="list-complete-img" src="./assets/logo.png" />
<div v-for="item in items" :key="item.id">
<img class="list-complete-img" :src="getImgUrl(item.src)" />
</div>
</div>
귀하의 이미지에 대한 액세스 권한이 없기 때문에 Vue 로고를 이미지로 사용할 수 있습니다.
요약하면 위의 문제는 Vue컴파일 할 때 모든 자산을 가져 와서 아래 이미지와 같이 다른 폴더에 저장해야합니다.
이 패턴을 따르면 예제도 작동합니다. 즐겨!
편집 : 원하는 경우 정적 자산을 공용 폴더에 배치 할 수 있습니다. 이렇게하면 자산에 대한 정적 경로를 작성할 수 있습니다.
이 시도: v-for="(item, i) in items" :key="i"
동적 이미지를 사용하려면 require ()를 사용하십시오. 이것에 당신이 가진 것을 바꾸십시오.
<div id="app">
<div v-for="item in data.items" :key="item.id">
<img ... :src="require(item.src)" />
</div>
</div>내가 틀렸다면 나를 고치는 데 도움이 될 수있는 for 루프를 사용할 수 있습니다.