Vue 不加载动态 src 并且 require 不起作用

Question

我有一个问题，我想显示一个动态 img 但如果我这样写：<img :src="src" alt="img">  它不起作用，相反，如果我这样做它会起作用： <img src="../assets/img/banana.png" alt="img">我已经尝试过 whit require 但它返回错误： Error: Cannot find module '../assets/img/banana.png'"

Answer 1

问题是没有关于模块所在位置的信息，webpack 无法解析它。

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

import() 必须至少包含一些关于模块所在位置的信息。

要解决此问题，您可以创建一个 BaseImage 组件来替换以特定路径开头的动态源，在本例../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"/>

修改后的codeandbox