来自〜asset文件夹的Vue + Webpack别名动态图像src答案

【问题标题】：Vue + Webpack alias dynamic image src from ~asset folder来自〜asset文件夹的Vue + Webpack别名动态图像src
【发布时间】：2018-06-02 12:08:26
【问题描述】：

我正在尝试使用 Webpack 别名从 Vue 数据中获取动态图像 src。

为了在 html 或 css 中使用 ~assets/ 访问正确的文件夹，我在我的 webpack 配置中添加了一个 assets 别名。

Webpack 配置

resolve: {
  alias: {
    ...
    'assets': resolve('src/assets')
    ...
},

Vue 数据

data: {
  ...
  img: 'name-of-my-image.jpg',
  ...
}

HTML

<img :src="'~assets/' + img"> // Does not work

~assets/ 与常规 src 图片 <img src="~assets/..."> 或 CSS 图片 url('~assets/...') 完美搭配

如何在 Vue 中将 ~assets/ 与 :src 和 data 一起使用？

【问题讨论】：

【解决方案1】：

这是另一种方式

在您的方法中添加此代码

    getImgUrl(img) 
    {
            return '~assets/' + img
    }

在这样的模板调用中

 <img :src="getImgUrl(img)">

【讨论】：

不幸的是，它不起作用。你的功能和<img :src="'~assets/' + img">一样。事实上，webpack 是在编译前修改 src url，然后使用 Vue 中的数据。所以，别无选择，使用静态图片网址，如.././assets/my-image.jpg

【解决方案2】：

在require的帮助下，通过解析图像URL创建一个返回路径的方法

方法：

    getImage(image) {
        return require("Images/" + image);
    }

这里的“Images”是在 webpack 配置中定义的别名。

模板：

img(:src="getImage('imageName.jpg')")

【讨论】：