Question

下面是我的文件结构

项目

|-src
  |-assets
    |-images
----->|-logo.png
  |-components
    |-json
----->|-data.json
    |-mainComp
----->|-exp.vue

现在这是我的data.json代码

"Experience": {
    "0": {
      "sectionTitle": "Awards",
      "sectionContent": {
        "0": {
          "articleTitle": "Adobeedu",
          "articleValue": "2019 Early Bird",
          "articleDate": "Acheived on 2019",
          "image": true,
          "articleImgPath": "../../assets/images/logo.png",
          "articleAlt": "AdobeEdu Early Bird Award"
        }
      }
    }
}

下面是exp.vue的代码

<template>
  <div>
    <section class="exp__section" v-for="(data, index) in jsonTitle" :key="index">
      <h5>{{data.sectionTitle}}</h5>
      <article
        v-for="(items, idx) in data.sectionContent"
        v-bind:class="{'content__box':true, 'contains__image':(items.image === true)}"
        :key="idx"
      >
        <h6>{{items.articleTitle}}</h6>
        <div class="image__row">
          <div class="image__box">
            <!-- <img :src="items.articleImgPath" :alt="items.articleAlt" /> -->
          </div>
          <h3>{{items.articleValue}}</h3>
        </div>
        <p>{{items.articleDate}}</p>
      </article>
    </section>
  </div>
</template>
<script>
import json from "@/components/json/english.json";
export default {
  name: "ExperienceSection",
  data() {
    return {
      jsonTitle: json.Experience
    };
  }
};
</script>

现在src确实获得了值：../../assets/images/logo.png，但是图像没有加载。我以为可能我没有正确访问文件结构，所以尝试了./，../，../../../，../../../../，但是我认为这可能不是问题，我可能毕竟需要一些东西来加载图像。

Answer 1

发生这种情况是因为Vue CLI使用Webpack捆绑了资产文件夹，并且这种捆绑重命名了文件/路径。因此，在绑定到资产来源时，解决此问题的最简单方法是在模板中使用require并对资产路径和任何子路径进行硬编码。例如

<img :src="require('@/assets/images/' + items.articleImgPath)" :alt="items.articleAlt">

从变量中删除路径，仅使用文件名：

"articleImgPath": "logo.png",

这也使JSON保持路径名干净。

来自资产的Vue动态图像

1 个答案: