Javascript Vue don'；t加载动态src并要求不'；行不通

我有一个问题，我想显示一个动态img，但如果我这样写：

它不起作用

相反，如果我这样做，它会起作用：

我已尝试whit require，但它返回一个错误：

---

错误：找不到模块“../assets/img/banana.png”

问题是没有关于模块所在位置的信息，网页包无法解决该问题

不可能使用完全动态的导入语句，例如 导入（foo）。因为foo可能是中任何文件的任何路径 您的系统或项目

import（）必须至少包含有关 模块位于

要解决此问题，您可以创建一个BaseImage组件来替换以特定路径开头的动态源，在本例中为

。/assets/

，并事先让webpack知道该信息

即

---

导入图像时，它返回错误：找不到模块“../assets/img/*.png”可能您的路径错误..实际上我刚刚检查过并且

*

似乎无法使用vue cli:（必须是parceljs的东西：）我刚刚检查过并且

工作正常。@AndersonIvanWitzke不，他们没有

<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 :src="img.src"  :alt="img.alt"> -->
<BaseImage :src="img.src" :alt="img.alt"/>