Javascript 来自资产的Vue动态图像

下面是我的文件结构

计划

|-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>

{{data.sectionTitle}}
{{items.articleTitle}
{{items.articleValue}
{{items.articleDate}

从“@/components/json/english.json”导入json；
导出默认值{
名称：“体验区”，
数据（）{
返回{
jsonTitle:json.Experience
};
}
};

---

现在src确实得到了值：

。/../assets/images/logo.png

，但图像不会加载。我想可能是我没有正确访问文件结构，所以我尝试了

/

，

./

，

./../../../../../../../../code>，
./../../../../../../code>，但我认为这可能不是问题所在，毕竟我可能需要一些东西来加载映像。
发生这种情况是因为Vue CLI使用Webpack捆绑资产文件夹，此绑定将重命名文件/路径。因此，当绑定到资产源时，克服这一问题的最简单方法是在模板中使用
require
，并对资产路径和任何子路径进行硬编码。比如说



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

"articleImgPath": "logo.png",

这也使JSON保持了路径名的干净。
谢谢Dan，我没有考虑捆绑，但是现在我已经找到了正确的位置，并且使用了您所说的新语法，整个组件似乎没有加载<代码>
嗨，不客气。请完全按照所示使用语法：
@/assets/images/'
。
@
符号是项目
src
文件夹的一个网页别名。“对不起，不行了。”。可能是
@
指向我代码中的不同位置。没关系。这是正确的方法，因此代码中肯定有其他错误。您是否已按上述方式更改JSON？控制台中出现了什么错误？