Vue не загружать динамику c sr c и require не работает - PullRequest
Новая
       18

Vue не загружать динамику c sr c и require не работает

3 голосов
/ 03 августа 2020

У меня проблема, я хочу показать динамический c img, но если я напишу вот так: <img :src="src" alt="img"> Это не работает,

вместо этого работает, если я делаю: <img src="../assets/img/banana.png" alt="img">

Я уже пробовал, но он возвращает ошибку: Error: Cannot find module '../assets/img/banana.png'"

1 Ответ

1 голос
/ 03 августа 2020

Проблема в том, что нет информации о том, где расположен модуль, и webpack не может решить эту проблему.

Невозможно использовать полностью динамический c оператор импорта, такой как import (фу). Поскольку foo потенциально может быть любым путем к любому файлу в вашей системе или проекте.

import () должен содержать по крайней мере некоторую информацию о том, где находится модуль.

Чтобы исправить таким образом, вы можете создать компонент BaseImage, который заменяет источники Dynami c, которые начинаются с определенного пути, в данном случае ../assets/, и заранее сообщать webpack эту информацию.

ie. 

<template>
  <img
    :src="computedSrc"
    :alt="alt"
    class="BaseImage"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

<script>
export default {
  name: 'BaseImage',

  inheritAttrs: false,

  props: {
    src: {
      type: String,
      required: true,
    },

    /**
     * The alt tag is required for accessibility and SEO purposes.
     *
     * If it is a decorative image, which is purely there for design reasons,
     * consider moving it to CSS or using an empty alt tag.
     */
    alt: {
      type: String,
      required: true,
    },
  },

  computed: {
    // If the URL starts with ../assets/, it will be interpreted as a module request.
    isModuleRequest() {
      return this.src.startsWith('../assets/')
    },

    computedSrc() {
      // If it is a module request,
      // the exact module is not known on compile time,
      // so an expression is used in the request to create a context.
      return this.isModuleRequest
        ? require(`../assets/${this.src.replace('../assets/', '')}`)
        : this.src
    },
  },
}
</script>

Замените img на компонент BaseImage. 

<!-- <img :src="img.src"  :alt="img.alt"> -->
<BaseImage :src="img.src" :alt="img.alt"/>

Исправленные коды и ящик

...