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

Question

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

<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 不会触及它们。

要解决此问题，请在元素的根目录下创建一个“静态”目录(假设您还没有)。在其中，创建一个“images”目录。当构建运行时，Webpack 会将 static 中的所有内容复制到 dist 文件夹。

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