使用 Vue.js + axios 将本地图像链接到 api 数组

Posted 2023-02-22

【中文标题】使用 Vue.js + axios 将本地图像链接到 api 数组

【英文标题】：link local images to api array using Vue.js + axios

【发布时间】：2020-11-23 23:15:53

【问题描述】：

我真的是 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
        )
,

)

【问题讨论】：

你可以在这里查看这个解决方案：***.com/questions/37645243/…

如果您从另一台服务器加载图像，则称为热链接，并且必须在您的服务器上允许。但我认为默认情况下它会在 apache/nginx 中工作。所以你只需要检查其他服务器是否可以访问图片资源。

@RodrigoVinicius 这个和 Majed 的评论对我帮助很大！

【参考方案1】：

需要将图片名称绑定到src:

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

【讨论】：

天哪！？只是？？？工作得很好！我在包装路径时尝试使用简单的''...与``一起工作得很好。

【参考方案2】：

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

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

【讨论】：

我很遗憾地使用 html 文件并从 js 文件调用 vue+axios

如果您打算将它与捆绑器一起使用，您应该使用该语法