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

【问题标题】：how to set background image url for local files?如何为本地文件设置背景图片 url？
【发布时间】：2020-07-10 00:30:52
【问题描述】：

我想将相对图像 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 从 assets 文件夹开始

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

更新

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

使用 Vue CLI 创建一个新项目
在src/assets 中创建一个images 目录
在src/assets/images 中创建一个图像并将其命名为HeroImg
用

.

<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。

【问题讨论】：

标签： html vue.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试这样的css文件

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

【讨论】：

【解决方案3】：

当您使用相对路径时，如果在您的内联 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')}`
    };
  }
}

【讨论】：

【解决方案4】：

我认为你没有指定 height 和 width 属性。

div {
    width: 60px;
    height: 60px;
    border: 1px solid black;
}

&lt;div style="background-image: url(https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2017/04/Blog_coding-game.jpg.webp)"&gt;&lt;/div&gt;

【讨论】：

对不起，我已经试过了。这对我不起作用（我正在使用 VueJs）

【解决方案5】：

你应该用引号括起来。

来自MDN，我们需要将图片的路径或url包装成一个

背景图片：url("../../media/examples/lizard.png");

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

建议：

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

【讨论】：

对不起，我已经试过了。这对我不起作用（我正在使用 VueJs）

【解决方案6】：

html

<div class="yourDivClass">
    Content goes here
</div>

css

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

【讨论】：

抱歉，有没有 html 解决方案？因为网址是动态的
只需在你的css的url('')属性中添加url，它仍然可以工作
对不起，我已经试过了。这对我不起作用（我正在使用 VueJs）