如何为本地文件设置背景图像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
• 资产/images/heroimg.jpg可能吗？
• ./assets/images/heroimg.jpg从src文件夹开始
• images/heroimg.jpg和./images/heroimg.jpg从“资源”文件夹开始

背景图像的正确url是什么？

更新

我在用VueJs所以这里的情况可能会有所不同？再现的步骤：

• 使用Vue CLI创建新项目
• 在src/assets
中创建 images目录
• 在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

当您使用相对路径时，如果在内联style属性中发现它们，Webpack将无法正确解析它们。但是，如果直接将图像路径用作模板中的元素源，则Webpack可以正确解析图像路径。因此，将解析图像路径用作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')}`
    };
  }
}