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

Posted 2023-02-22

【中文标题】Vue.js props img src 与 webpack 别名 (@) 绑定

【英文标题】：Vue.js props img src binding with webpack alias (@)

【发布时间】：2018-12-05 04:52:03

【问题描述】：

我的 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'),
  
,

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

【参考方案1】：

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

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

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

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

【讨论】：

谢谢，我加载了动态数据。我使用静态 ，工作。但道具无法解析，直接字符串。

如何将您的图像放在将由您的服务器直接提供服务的目录中，并在 src 中使用它们的 url。不需要导入任何东西。像 .

【参考方案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 你可以看到它是如何工作的以及类似的问题。

希望对你有帮助！

【讨论】：

@myazarc 如果你的意思是从数据库中动态而不是通过解析路径导入或请求@ 将永远无法工作

@SuperDJ 没有数据库，在数组中用于快速加载。