如何设置本地文件的背景图片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。

Answer 1

特里的回答成功了，但我需要在url标签内容周围添加一组额外的括号：

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