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

我认为应该使用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>

在这里和这里你可以看到它是如何工作的以及类似的问题。

希望能帮助到你！