Vue + Webpack 别名动态加载图片 src 来自 ~asset 文件夹。

Question

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

为了在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呢？

- Yann Masoch

---

在DevTools的网络选项卡中，您看到了哪个请求，然后Vue设置了“src”的值，但它“不起作用”？ - MihanEntalpo

Webpack正在通过ID替换src的值。 - Yann Masoch

有没有人对这个问题有解决方案？ - Dariel Ramos Díaz de Villegas

Answer 1

这里有一种替代方法

在你的方法中添加以下代码

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

在你的模板中这样调用

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

- Rajeev Radhakrishnan

---

很遗憾，它不起作用。你的函数与执行<img :src="'~assets/' + img">相同。实际上，在编译之前webpack会修改src url，并且Vue中的数据紧随其后使用。因此，唯一的选择是使用静态图像url，例如.././assets/my-image.jpg。 - Yann Masoch

在 vue.config.js 文件的 chainWebpack 部分中，您可以为自定义路径设置别名，并将其设置为任何您想要的内容：config.resolve.alias.set('@assets', path.resolve('assets', 'some-sub-dir) // helper for vue file support。 - steven87vt

Answer 2

创建一个方法，通过使用 require 来解析图像的 URL 并返回路径。 方法：

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

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

模板：

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

- theHarsh