来自 assets 的 Vue 动态图像

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 捆绑了 assets 文件夹，并且此捆绑重命名了 files/path。因此，当绑定到资产源时，克服此问题的最简单方法是在模板中使用 require 并对 assets 路径和任何子路径进行硬编码。例如

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

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

"articleImgPath": "logo.png",

这也保持 JSON 路径名的清洁。

来自 assets 的 Vue 动态图像

Vue dynamic image from assets

javascript

webpack

vue.js

vuejs2

vue-cli