如何为本地文件设置背景图片url？

Question

我想将一个相对图像 url 粘贴到一个 div 以将其设置为背景图像。不幸的是，div 不会呈现图像。所以这很好用并渲染了图像

<img src="../assets/images/HeroImg.jpg">

但是这个没有

<div style="background-image: url(../assets/images/HeroImg.jpg)">
    Content goes here
</div>

我也尝试过的事情：

• 将 url 包裹在单引号内
• assets/images/HeroImg.jpg 也许吧？
• ./assets/images/HeroImg.jpg 从src文件夹开始
• images/HeroImg.jpg 和 ./images/HeroImg.jpg 从资产文件夹开始

用于背景图片的正确网址是什么？

---

更新

我正在使用 VueJs，所以这里的情况可能有所不同？重现步骤：

• 使用 Vue CLI 创建一个新项目
• 在 --- 中创建一个 images 目录 src/assets
• 在 src/assets/images 中创建一个图像，并将其命名为 HeroImg
• 更新 App.vue 文件

.

 <template>
  <div id="app">
    <div>
      This works:
    </div>
    <div>
      <img src="./assets/images/HeroImg.jpg">
    </div>
    <div>
      This doesn't work:
    </div>
    <div style="background-image: url('./assets/images/HeroImg.jpg')">
        Content without background image
    </div>
  </div>
</template>

您将看到 img 标签呈现图像而不是带有背景图像的 div。

原文由 Question3r 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当您使用相对路径时，如果在内联 style 属性中找到它们，Webpack 将无法正确解析它们。但是，如果 Webpack 直接在模板中用作 <img> 元素源，则可以正确解析图像路径。因此，将已解析的图像路径用作 CSS 属性的解决方案是将其简单地 引用为计算属性。

在您的模板中，您可以使用 v-bind:style="heroImage" 来引用计算属性：

 <template>
  <div id="app">
    <div v-bind:style="heroImage">
        Content without background image
    </div>
  </div>
</template>

然后，在您的 VueJS 组件本身中，您可以执行以下操作：

 computed: {
  heroImage() {
    return {
      backgroundImage: `url${require('../assets/images/HeroImg.jpg')}`
    };
  }
}

原文由 Terry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

特里的回答起到了作用，但我需要在 url 标签内容周围加上一组额外的括号：

 computed: {
  heroImage() {
    return {
      backgroundImage: `url(${require('../assets/images/HeroImg.jpg')})`
    };
  }
}

原文由 Stephen 发布，翻译遵循 CC BY-SA 4.0 许可协议