Vue + Webpack别名来自〜asset文件夹

Question

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

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

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/...')完美配合

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

Answer 1

这是另一种方式

在您的方法中添加此代码

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

在模板上调用

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

Answer 2

创建一个方法，通过在require

的帮助下解析图像URL来返回路径

方式：

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

这里＆＃34;图像＆＃34;是webpack config中定义的别名。

<强>模板：

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