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

    };

  }

}

Answer 2

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

    };

  }

}

Answer 3

您应该用引号将它们括起来。

从MDN来看，我们需要将图像的路径或 url 包装成

背景图像：url（“../../media/examples/lizard.png”）；

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

建议：

最好避免使用内联样式。您可以将样式包含在外部工作表中。

Answer 4

像这样在 css 文件中尝试

background-image: url('~src/assets/home-page-img/header-bg.jpg');

Answer 5

html

<div class="yourDivClass">

    Content goes here

</div>

CSS

.yourDivClass {

  background: url('../assets/images/HeroImg.jpg') no-repeat center center / cover

}