解决方案

Question

我在插入图片时遇到问题，虽然我认为我的路径是正确的，但出现404错误。我的文件是：

主菜单

phone.png

_menu.scss

在我的文件_menu.scss中，我有以下代码：

 .phone {
  background-image: url(phone.png);
}

.phone是我班的名字。我和Drupal和Twig一起工作。

谢谢您的帮助，对不起我的英语。

Answer 1

在div中作为背景添加时，必须添加“ height”和“ width”以显示背景图像。

它没有显示：

 .phone {
  background-image: url(https://picsum.photos/300/300);
}

<div class="phone"></div>

但它显示：

 .phone {
  background-image: url(https://picsum.photos/300/300);
   height:300px;
   width:300px;
}

<div class="phone"></div>

Answer 2

如果文件树是正确的，那么您要做的就是添加宽度和长度。您没有在告诉浏览器制造手机的高度和宽度，因此它不会显示任何内容。

 .phone {
  background-image: url(phone.png);
  width: 500px;
  height: 600px;
}

<div class="phone"></div>

我没有您的phone.png，但是应该是这样。

Answer 3

解决方案

有两种导入图像的方法。
1.使用HTML标记。
2.使用CSS背景。

使用CSS版本时，请不要忘记background-size和background-position。

示例：

.image {
  background: url('path/to/img.png') no-repeat;
  background-size: contain; /*This scales the image accoding to the div*/
  background-position: center center; /*positions the image in the center*/
  width: auto;
  height: 50px;
}

<img src="path/to/img.png" />

<div class="image"></div>

Answer 4

对不起，但是我总是有同样的问题：我的TWIG代码：

<div class="col-6">
  <div class="phone">
  </div>

和我的SASS代码：

.phone {
  background: url('phone.png') no-repeat;
  background-size: contain; /*This scales the image accoding to the div*/
  background-position: center; /*positions the image in the center*/
  width: auto;
  height: 50px;
}

我的文件也总是一样：

主菜单
- phone.png
- menu.scss

我总是遇到404错误谢谢

Answer 5

也许您可以尝试：./phone.png。

.phone {
  background: url('./phone.png') no-repeat;
  background-size: contain; /*This scales the image accoding to the div*/
  background-position: center; /*positions the image in the center*/
  width: auto;
  height: 50px;
}

如何在CSS中正确插入我的图片？

5 个答案:

解决方案

示例：