使用Vue.js axios将本地图像链接到api阵列

Question

我对vue和axios非常陌生，需要很大的帮助。

我有一个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
        })
},

})

Answer 1

如果您使用的是vue cli或任何基于绑定器的工具，则可以将路径与来自API的图像名称连接起来，并使用require加载路径：

<img :src="require('./img/products/'+potion.image)" />

Answer 2

您需要将图像名称绑定到src：

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