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

Posted 2023-02-22

【中文标题】如何在 vue 3 中使用 v-for 附加图像

【英文标题】：how to attach image using v-for in vue 3

【发布时间】：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 " >
            <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">，但仍然没有结果。

【参考方案1】：

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

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

【讨论】：

我应该在代码中添加一些东西来使用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 正确解析，这应该可以使其正常工作。否则，它可能需要一些额外的技巧来定位正确的目录。