v-bind:src 属性不适用于 v-for答案

【问题标题】：v-bind:src property not working with v-forv-bind:src 属性不适用于 v-for
【发布时间】：2021-08-29 14:15:56
【问题描述】：

由于某种原因，imageURL 属性不起作用，即使 url 是正确的，带有 v-bind:src 属性。

模板：

<div v-for="project in projects" :key="project.id">
    <section class="project-wrapper">

        <img :src="project.imageURL" alt="Project image"/> //THE PROBLEM

        <h1>{{ project.title }}</h1>
        <p>{{ project.about }}</p>
        <router-link :to="{ name: project.routeName }" class="type-two-link">ver projeto</router-link>

    </section>
</div>

脚本：

data() {
    return {
      projects: [
        {
          id: this.projectId,
          title: "Minimalist Portfolio",
          about: "...",
          imageURL: "./minimalist-porfolio-desktop.png", //THE PROBLEM
          routeName: "Minimalist Portfolio",
        },
      ],
    };
  },

我做错了什么？欢迎任何帮助。

【问题讨论】：

虽然 url 是正确的，它是一个相对路径，所以在你构建的时候它不会是正确的，你想要require 或import 图片那么它将是正确的
另外，如果 projects 来自后端 api 调用，则 routeName 很可能会在某些时候遇到问题，可以通过使用 slug :to="project.slug" 来解决
尝试使用 :src="require("${project.imageURL}")
@Amaarrockz 我认为require 不允许使用动态参数
好的，@LawrenceCherone。不知道这是个问题。我要做一些研究。谢谢。

标签： vue.js object oop

【解决方案1】：

我尝试在模板中使用“required()”，但没有成功。所以，这就是我解决它的方法：

data() {
    return {
      projects: [
        {
         "...",

          imageURL: require("../../assets/images/projects/minimalist-portfolio/minimalist-porfolio-desktop.png"),

          routeSlugName: "My Portfolio",
        },
      ],
    };
  },
,

您可以在这里了解更多信息： Static image src in Vue.js template

【讨论】：