webpack - Vue + Webpack 别名动态图像 src 来自 ~asset 文件夹

Question

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

为了使用 ~assets/ 访问正确的文件夹在 html 或 css 中，我在 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/...')
我如何使用 ~assets/与 :src并与 data从 Vue?

Answer 1

这是另一种方式

在您的方法中添加此代码

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

在这样的模板调用中

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