Vue.js props img src 与 webpack 别名 (@) 绑定

Question

我的 vue 应用，使用别名绑定 img-src。它运行直接使用。

<img src="@/assets/search.png" />

但是，此代码生成组件，别名无法解析。

<template>
  <div class="button-card">
    <img :src="src">
  </div>
</template>

<script>
export default {
  name: 'Button Card',
  props: {
    src: {
      type: String,
    },
  },
};
</script>

带有组件构建结果的html：

<div class="button-card">
  <img src="@/assets/search.png">
  <!-- should be with resolve: src/assets/search.png -->
</div>

Webpack 别名定义配置：

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }
},

为什么这段代码无法解析？或者我该怎么做才能让它运行？

Answer 1

我相信 webpack 别名只适用于导入，请参阅 https://webpack.js.org/configuration/resolve/#resolve-alias：

更轻松地为import 或require 某些模块创建别名。比如给一堆常用的 src/ 文件夹起别名：

在您的情况下，@/assets/search.png 只是一个普通字符串。

我猜你可以在这里使用动态import() 函数，例如：return () => import(this.src)。

Answer 2

我认为应该使用data 而不是props（您不是在创建新组件并将道具发送给它）。

你可以试试：

<img :src="require('@/assets/search.png')" />

这是以下的简写：

<template>
  <div id="app">
    <img :src="image" />
  </div>
</template>

<script>
import image from "@/assets/search.png"


export default {
    data: function () {
        return {
            image: image
        }
    }
}
</script>

Here 和here 你可以看到它是如何工作的以及类似的问题。

希望对你有帮助！