如何在 vue 3 中使用 v-for 附加图像答案

【问题标题】：how to attach image using v-for in vue 3如何在 vue 3 中使用 v-for 附加图像
【发布时间】：2021-09-11 02:41:38
【问题描述】：

我尝试使用 v-for 循环制作一组图像，但不知何故它无法识别标签内的变量。图片坏了，alt 只显示了 {{ item.alt }} 东西。这是我的 HTML：

<section class="our-technologies__section" v-for="(item, index) in tech_item" :key="index">
        <div class="technologies__logo" @click="activeIndex = index" :class="{active: activeIndex === index}">
            <img src="{{ item.src }}" alt="{{ item.alt }}">
            <p>{{item.title}}</p>
        </div>
</section>

这里是脚本：

export default {
    name: "OurTechnologies",
    data: function () {
        return{
            tech_item: [
                { title: 'Twilio', text: 'gfmds/lgkmlk/f', src: '../../images/twilio.png', alt: 'Twilio' },
                { title: 'Android', text: '12334356676', src: '../../images/android.png', alt: 'Android' },
            ],
            activeIndex: 0,
        } 
    },
}

我尝试使用<img :src="item.src" :alt="item.alt">，但仍然没有结果。

【问题讨论】：

标签： html vue.js frontend vuejs3 v-for

【解决方案1】：

在 vue cli 中你应该使用require 来加载图片：

<img :src="require(item.src)" :alt="item.alt"/>

【讨论】：

我应该在代码中添加一些东西来使用require吗？ bc with it 页面根本没有加载？
是的，空白页和控制台显示“未捕获的错误：找不到模块 '../../images/twilio.png'”
tho，alt 正在工作，如果我用实际路径替换 require(item.src) 它也可以工作。 require 的路径应该不同吗？
试试绝对的，比如src: '@/images/twilio.png'
同样的问题，页面是空白的同样的错误......但如果我写它有效。

【解决方案2】：

<img :src="item.src" :alt="item.alt"> 应该可以 ™，但是我对您设置的环境了解不够。我很快尝试了一个使用vite 并使用App 组件（因此它是根级别）的新项目，它甚至不需要require 就可以工作。为此，您的图像通常位于./src/assets/ 目录中，但它们不是，我想知道这是否是导致问题的原因，图像超出了范围。您可能有不同的设置，但我认为您可以使用其他选项。

将图像放入./public/images/ 文件夹。无论您使用的是dev/serve 还是build，这都会使它们成为捆绑包的一部分。然后将它们引用为/images/*.png，不带require 或import。只要您在根级别为应用程序提供服务，以便/images 正确解析，这应该可以使其正常工作。否则，它可能需要一些额外的技巧来定位正确的目录。

【讨论】：