Динамические изображения Vue.js не работают

Question

У меня есть случай, когда в моем Vue.js с webpack веб-приложение, мне нужно отображать динамические изображения. Я хочу показать img, где имя файла изображений хранится в переменной. Эта переменная является свойством computed, которое возвращает переменную магазина Vuex, которая заселяется асинхронно на beforeMount.

<div class="col-lg-2" v-for="pic in pics"> 
    <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic"> 
</div> 

Однако он отлично работает, когда я просто делаю:

<img src="../assets/dog.png" alt="dog"> 

Мой случай похож на этот fiddle, но здесь она работает с Img URL, но в шахте с реальными путями к файлам, это не Работа.

Каким должен быть правильный способ?

Answer 1

Я получил эту работу, следуя код

getImgUrl(pet) { 
    var images = require.context('../assets/', false, /\.png$/) 
    return images('./' + pet + ".png") 
    } 

и в HTML:

<div class="col-lg-2" v-for="pic in pics"> 
    <img :src="getImgUrl(pic)" v-bind:alt="pic"> 
</div> 

Но не знаю, почему мой прежний подход не работает.

Answer 2

Лучше всего использовать простой метод для построения правильной строки для изображения по данному индексу:

methods: { 
    getPic(index) { 
    return '../assets/' + this.pics[index] + '.png'; 
    } 
} 

затем выполните следующие действия внутри v-for:

<div class="col-lg-2" v-for="(pic, index) in pics"> 
    <img :src="getPic(index)" v-bind:alt="pic"> 
</div> 

Вот JSFiddle (очевидно, изображения не отображаются, поэтому я поставил изображение src рядом с изображением):

https://jsfiddle.net/q2rzssxr/

Answer 3

Вот краткое описание, которое будет использовать webpack, поэтому вам не обязательно использовать require.context.

HTML:

<div class="col-lg-2" v-for="pic in pics"> 
    <img :src="getImgUrl(pic)" v-bind:alt="pic"> 
</div> 

Вью Метод:

getImgUrl(pic) { 
    return require('../assets/'+pic) 
} 

И я считаю, что первые 2 пунктов в here объяснить , почему это работает? хорошо.

Обратите внимание, что это хорошая идея, чтобы поместить ваши фотографии домашних животных в подкаталог, вместо того, чтобы лепить его всеми вашими другими изображениями. Например: ./assets/pets/