Question

我这样做：

* -> *

但是图像没有显示出来。我想在不使用背景图像的情况下实现它

Answer 1

你差不多，只保留网址（但所有浏览器都不支持）

＆＃13;

.myimg {
  content: url('https://lorempixel.com/400/200/');
}

＆＃13;

<img class="myimg">

＆＃13;

如果已经定义了图像，这也将起作用：

＆＃13;

.myimg {
  content: url('https://lorempixel.com/400/200/');
}

＆＃13;

<img class="myimg" src="https://lorempixel.com/g/400/200/">

＆＃13;

对于浏览器兼容性更好地依赖于另一种方法。让我们假设您的图像在容器内，然后您可以尝试这样的事情：

＆＃13;

.myimg img {
  display: none;
}

.myimg:before {
  content: url('https://lorempixel.com/400/200/');
}

＆＃13;

<span class="myimg">
<img  src="https://lorempixel.com/g/400/200/">
</span>

＆＃13;

Answer 2

使用background-image：

.myimg{
 background-image: url('/images/user_logo.png');
}

Answer 3

尝试使用:before和:after方法来实现此目的。按照堆栈示例here

进行操作

.myimg:before {
    content:url('../images/user_logo.png');
}