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

我认为应该使用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，您会看到它是如何工作的以及类似的问题。

希望有帮助！

Answer 2

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

创建别名以更轻松地导入或要求。例如，为一堆常用的src /文件夹添加别名：

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

我想您可以在此处使用动态import()函数，例如：return () => import(this.src)。

Vue.js用Webpack别名（@）支持img src绑定

2 个答案: