使用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”，因为它意味着模块导入，而不是在模板内使用。你可以在另一期中找到关于“解决联盟”的更多细节