将资产图像路径作为动态内联样式背景图像 url (Nuxt.js)

Question

我正在开发 Nuxt.js 应用程序，我想使用资产文件夹中的图像动态设置元素的背景图像，这就是我所做的：

<template>
  <div>
    <div
      v-for="(image, imageID) in images"
      :key="imageID"
      :style="bgImg(image)"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: [
        '~assets/img/image1.jpg',
        '~assets/img/image2.jpg',
        '~assets/img/image3.jpg',
        '~assets/img/image4.jpg'
      ]
    }
  },
  methods: {
    bgImg(img) {
      return `background-image: url(${img})`
    }
  }
}
</script>

预期行为

div 是用动态背景图像呈现的

实际行为

不渲染背景图像。如果我将静态资产路径放入 css 文件中，则会呈现它

我必须如何传递路径才能正确呈现？

Answer 1

Nuxt Webpack 构建过程与一些url混淆

所以问题是模板和 CSS 中的路径在项目构建时由 Webpack 的文件加载器处理。例如~assets/在构建时被重写为 webpack 处理完成后的实际路径。

但是，由于您将路径字符串指定为 vue.js 数据的一部分，因此 Webpack 不会触及它们。

要解决此问题，请在项目的根目录下创建一个“静态”目录（假设您还没有）。在里面，创建一个“图像”目录。当构建运行时，Webpack 会将里面的所有内容复制static到dist文件夹中。

然后在您的组件中使用这些图像的路径是 /images/filename.ext