将资产图像路径作为动态内联样式背景图像传递 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 不会触及它们。

要解决此问题，请在项目的根目录下创建一个 "static" 目录（假设您还没有）。在其中，创建一个 "images" 目录。当构建为 运行.

时，Webpack 会将 static 中的所有内容复制到 dist 文件夹

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