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

Posted 2023-02-22

【中文标题】将资产图像路径作为动态内联样式背景图像 url (Nuxt.js)

【英文标题】：Pass assets image path as dynamic inline style background-image url (Nuxt.js)

【发布时间】：2020-01-01 20:42:05

【问题描述】：

我正在开发 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 文件中，它会被渲染

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

【参考方案1】：

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

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

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

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

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

【讨论】：

这是我试图避免的，我目前正在以这种方式处理动态图像，但我一直在阅读的文档说这不是最佳的。

由于什么原因不是最佳的？

"如果我们将狗图像移动到公用文件夹（或 Nuxt 中的静态文件夹），“它可以工作”。但这不是最佳的，我真的不推荐这种解决方法。 assets和public/static这两个文件夹，第一次尝试失败的原因是Webpack。public或static文件夹中的内容，是直接映射到你的web应用的根目录（通常是/），没有被Webpack处理。优化，添加内容哈希等等。”摘自blog.lichter.io/posts/…

嗯，这有点基于透视。您是否让 Webpack 调整大小或重新压缩图像？图像是否经常更改，因此不应缓存它们？如果你不做这些事情，你实际上会从 webpack 分配给 static 内容的 cache-control 策略中获得巨大的好处。