时间戳

首页 > 解决方案 > 为什么图像源为空时会添加黑线？

html - 为什么图像源为空时会添加黑线？

问题描述

在此处输入图像描述

我正在尝试创建一个带有图像预览的徽标上传组件，在添加图像源之前，我在图像边框附近看到这条黑线，我不知道为什么。

我试图禁用轮廓、边框半径等。但只有在添加实际图像时，这条黑线才会消失。

<div class="preview-logo">
    <img src='' />
</div>

.preview-logo {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.preview-logo img {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(185, 185, 185, 0.6),0 2px 10px 0 rgba(185, 185, 185,0.46);
    background-color: #eceafd;
    border: 1px solid #3633502d;
}

标签： htmlcss

解决方案

根据元素的 HTML 规范<img>：

src 属性必须存在，并且必须包含一个有效的非空 URL，该 URL 可能被空格包围，引用非交互式、可选动画的图像资源，既不是分页也不是脚本。

与大多数 HTML 元素一样，如果您不完全遵守规范，可能会发生奇怪的事情，<img>标签也不例外。但是，您可以利用另一个重要属性来解决问题（或不存在src的属性：alt属性。

您可以将alt属性设置为空字符串' '，这足以隐藏由于缺少src属性而当前看到的外边框：

<div class="preview-logo">
    <img src='' alt=' ' />
</div>

或者，如果您没有src设置属性，则可以考虑完全隐藏该元素：

.preview-logo img[src=''] {
    display: none;
}

例子

.preview-logo {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.preview-logo img {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(185, 185, 185, 0.6), 0 2px 10px 0 rgba(185, 185, 185, 0.46);
  background-color: #eceafd;
  border: 1px solid #3633502d;
}
<div class="preview-logo">
  <img src='' /><br /><br />
  <img src='' alt=' ' />
</div>

推荐阅读