간단한 vue 반복문인 것 같은데 해결이 어렵습니다.

Question

상품 목록은 3번의 반복을 돌고 있습니다. 제가 원하는 것은 img파일 또한 반복마다 다르게 표현되는 것입니다.<img :src&#61;&#34;&#96;./assets/room${i&#43;1}.jpeg&#96;&#34;>이렇게 작성을 했는데, 이렇게 하면 화면에 이미지가 정상적으로 출력되지 않습니다. 어떻게 해야할까요?

팩트폭행범 · Answer

그러면 이미지사진도 여러장있어야죠<img :src&#61;&#34;product.img&#34; >Product를 배열안에 Json으로 넣으세여 [ { roomName: &#34;&#34;, img: &#34;&#34; }, {roomName: &#34;&#34;, img: &#34;&#34; }] 이런식으로

Clickin · Answer

번들러가 번들링할 때 실제 asset의 위치는 달라질 수 있습니다근데 그걸 정적 스트링에 조건을 넣어서 번들링하시면 번들러가 알아낼 방도가 마땅치 않습니다이럴 때는 동적 import를 통해서 이를 해결해볼 수 있겠습니다.https://babycoder05.tistory.com/entry/Vue3-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%83%9C%EA%B7%B8%EC%97%90-%EA%B2%BD%EB%A1%9C%EB%A5%BC-%EB%8F%99%EC%A0%81%EC%9C%BC%EB%A1%9C-%EB%B6%88%EB%9F%AC%EC%98%AC-%EB%95%8C-%EC%97%91%EB%B0%95-v-bind-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

에르딘트 · Answer

assets 안에 이미지 넣어놓으면 빌드할때 해당이미지를 고대로~ 옮겨주는게 아니라 base64로 변환해 버립니다그래서 require로 미리 로딩해 놓지 않으면 이미지도 못 찾죠...그래서 public 이란게 있습니다. static 폴더라고도 하구요 여기에 넣으면 빌드할 때 빌드 대상에서 빠집니다. 그래서 파일 그대로 옮겨주고 url로 접근 가능합니다.

간단한 vue 반복문인 것 같은데 해결이 어렵습니다.

3개의 답변

기술 목록