VUE JS 배열에서 그림 바인딩

Question

개체 배열에서 일부 그림을 img 요소에 바인딩하려고합니다. 문자열을 HTML 요소로 전달할 수는 있지만 사진과 관련된 문제가 있습니다. 어떤 도움이라도 좋을 것입니다. 여기에 내 github 계정이 있기 때문에 템플릿에 바로 나타나야하고 그걸 읽기 어려울 싶지 않아 자바 스크립트를 얻을 수 없습니다.

https://github.com/UgotGoosed/Vue-Shopping-Cart

Answer 1

을

<img class="group list-group-image" src="" alt="" /> 

~

<img class="group list-group-image" v-bind:src="product.img" alt="" /> 

Answer 2

것은 :src="require(path/to/image)"를 사용해보십시오.

메모. :src=""은 v-bind:src=""에 대한 속기라고 생각합니다. 이 예와 같이

:

<figure class="meals-showcase-list-item"> 
     <img 
     class="meals-showcase-list-item-photo" 
     :src="require('../../assets/images/' + meal.image)" 
     :alt="meal.description"> 
    </figure> 

및 부품 데이터, 나 이미지 소스의 어레이가

: 당신 index.html 파일의 변화

data() { 
    return { 
    meals: [ 
     { image: '1.jpg', description: 'Korean bibimbap with egg and vegetables' }, 
     { image: '2.jpg', description: 'Simple italian pizza with cherry tomatoes' }, 
     { image: '3.jpg', description: 'Chicken breast steak with vegetables' }, 
     { image: '4.jpg', description: 'Autumn pumpkin soup' }, 
     { image: '5.jpg', description: 'Paleo beef steak with vegetables' }, 
     { image: '6.jpg', description: 'Healthy baguette with egg and vegetables' }, 
     { image: '7.jpg', description: 'Burger with cheddar and bacon' }, 
     { image: '8.jpg', description: 'Granola with cherries and strawberries' } 
    ] 
    } 
}