使用 vue js 2 从 json 文件中获取 img src

Question

我正在尝试从 json 文件中获取 img src 属性，但没有显示图像，而是显示了替代文本。 我确信这些图像是在目录 src/assets 中找到的，并且它们的名称是正确的。

这是组件：

<template>
  <div>
    <div class="project" :title="title" :image="image" :desc="desc">
      <div class="p-title">{{title}}</div>
      <div class="p-image">
        <img :src="image" :alt="title">
      </div>
      <div class="p-desc">{{desc}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AllProjects',
  props: ["title","image","desc"]
}
</script>

和观点：

<template>
  <div class="projects">
    <AllProjects
      v-for="project in projects"
      :key="project.id"
      :title="project.title"
      :image="`@/assets/${project.image}`"
      :desc="project.desc"
    />
  </div>
</template>

<script>
import AllProjects from "@/components/AllProjects.vue";
import JsonProjects from "@/projects.json";
export default {
  name: "Projects",
  components: {
    AllProjects,
  },
  data: function () {
    return {
      projects: JsonProjects,
    };
  },
};
</script>

还有 projects.json 文件：

[
  {
    "id":0,
    "title":"Blog Website",
    "image":"blog.png",
    "desc":"Description Of The Project"
  },
  {
    "id":1,
    "title":"Social Media Website",
    "image":"social-media.png",
    "desc":"Description Of The Project"
  },
  {
    "id":2,
    "title":"Online Courses Website",
    "image":"online-courses.png",
    "desc":"Description Of The Project"
  }
]

那么我的错误在哪里？

Answer 1

问题出在您的图像路径中 - 将“@”替换为图像的完整路径，因为它无法正确解决：

:img = "`src/assets/${project.image}`"

'@' 字符是与 webpack 一起使用的“解决联盟” - 来自 webpack 文档：

创建别名以更轻松地导入或需要某些模块

您可以尝试像这样将路径绑定到 dom： {{ @/assets/ }}并看到它没有解析为“src”，因为它意味着模块导入而不是在模板中使用。 您可以在另一个问题中找到有关“解决联盟”的更多详细信息