이미지 주소를 어레이에 배치하고 소스 VUE JS에서 해당 어레이 인덱스를 사용하는 방법

이미지 주소를 어레이에 배치하고 소스 VUE JS에서 해당 어레이 인덱스를 사용하는 방법

나는 vue js에 처음 빠져서 작은 문제에 직면해 있다.처음 접하는 거라 작은 문제일 거야. 혼자서는 해결할 수 없어.어떤 제안이나 해결책이든 설득력이 있을 것이다.

문제는 이미지 주소(자산 디렉토리에 있을 이미지)를 배열로 저장한 다음 그 주소를 태그에 원본으로 전달하고 싶다.예를 들어 다음과 같은 코드가 있다.

   <div class="text-h2" v-for="img in imgs" :key="img"> 
                           <img src="{{img}}" alt="">
     </div>

이미지 소스를 src 어레이에 저장할 위치:

export default {
    name: 'Home',
   data: () => ({
      imgs: ['./assets/img1.png','./assts/img2.png' ],
    }),

어떤 힌트라도 정말 감명깊게

메서드를 생성할 수 있음:

methods() {
  getImage(imagePath) {
    return require(imagePath);
  }
}

그런 다음 템플릿에서 다음 방법을 호출하십시오.

<img :src="getImage(img)" alt="">

:src를 사용하여 이미지 소스를 어레이 imgs에서 img에 바인딩하십시오.

참조URL: https://stackoverflow.com/questions/68367108/how-to-place-image-address-in-array-and-use-that-array-index-in-source-vue-js