Vue Dynami c изображение из активов - PullRequest
Новая
       51

Vue Dynami c изображение из активов

1 голос
/ 03 апреля 2020

Ниже моя файловая структура

Проект 

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

Теперь вот мои данные. 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"
        }
      }
    }
}

, а здесь ниже код Эксп. 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>

Теперь sr c действительно получает значение: ../../assets/images/logo.png, но изображения не загружаются. Я подумал, что, возможно, у меня нет доступа к файловой структуре должным образом, поэтому я попытался ./, ../, ../../../, ../../../../, но я думаю, что это не проблема, и мне может понадобиться что-то, чтобы загрузить изображение в конце концов .

1 Ответ

2 голосов
/ 03 апреля 2020

Это происходит потому, что CLI Vue использует Webpack для связывания папки assets , и это связывание переименовывает файлы / путь. Поэтому при привязке к источнику ресурса самый простой способ преодолеть это - использовать require в шаблоне и жестко закодировать путь assets и любой подпуть. Например, 

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

Удалите путь из переменной и используйте только имя файла: 

"articleImgPath": "logo.png",

Это также обеспечивает чистоту JSON имен путей.

...