связать локальные изображения с массивом api, используя Vue. js + axios - PullRequest
Новая
       24

связать локальные изображения с массивом api, используя Vue. js + axios

1 голос
/ 04 августа 2020

Я новичок в vue и axios, и мне нужна действительно большая помощь.

У меня есть API, возвращающий мне некоторые данные массива.

API: 

"potions": {
"1": {
  "id": 1,
  "name": "Aging Potion",
  "image": "aging-potion.png",
  "price": 29.99,
  "effect": "Causes the drinker to advance in age",
  "ingredients": [
    "Red Wine",
    "Prune Juice",
    "Hairy Fungus",
    "Tortoise Shell",
    "Caterpillar",
    "Bat Tongue"
  ]
}

Как видите, image вызывается локально. У меня все изображения хранятся локально на моей машине на ./img/products. Как я привязываю все изображения к соответствующему зелью в v-for? Возможно ли Javascript рендерить изображения, которые не находятся на том же сервере, что и данные api?

HTML код: 

 <div id="app">
    <section v-if="errored">
        <p>Pedimos desculpas, não estamos conseguindo recuperar as informações no momento. Por favor, tente
            novamente mais tarde.</p>
    </section>
    <div v-else>
        <div v-for="(potion, index) in potions_list" :key="index">
            <div class="img">

            </div>
            <h1>{{potion.name}}</h1>
            <!-- <p>{{potion.effect}}</p> -->
            <p>{{potion.price}}</p>
            <!-- <div v-for="(ingredient, index) in potion.ingredients" :key="index">
                        <ul>{{ingredient}}</ul>
                    </div> -->
        </div>
    </div>
</div>

JS код: 

new Vue({
el: '#app',
data() {
    return {
        potions_list: [],
        errored: false,
    }
},
mounted: function () {
    this.getAllPotions();
},
mounted() {
    axios
        .get('https://cdn.rawgit.com/LucasRuy/1d4a5d45e2ea204d712d0b324af28bab/raw/342e0e9277be486102543c7f50ef5fcf193234b6/potions.json')
        .then((response) => {
            const { potions } = response.data;
            this.potions_list = potions;
            console.log(potions);
        })
        .catch(error => {
            console.log(error)
            this.errored = true
        })
},

})

Ответы [ 2 ]

1 голос
/ 04 августа 2020

Вы можете объединить путь с именем изображения, полученным из API, и использовать require для их загрузки, если вы используете vue cli или любой инструмент на основе сборщика: 

<img :src="require('./img/products/'+potion.image)" />
1 голос
/ 04 августа 2020

Вам нужно привязать имя изображения к src: 

<img :src="`./img/products/${potion.image}`" />
...