将资产图像路径作为动态内联样式背景图像 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