设置img标记的src属性的等价物

时间:2018-03-09 07:02:05

标签: html css

我这样做:

* -> *

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

3 个答案:

答案 0 :(得分:2)

你差不多,只保留网址(但所有浏览器都不支持)



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

<img class="myimg">
&#13;
&#13;
&#13;

如果已经定义了图像,这也将起作用:

&#13;
&#13;
.myimg {
  content: url('https://lorempixel.com/400/200/');
}
&#13;
<img class="myimg" src="https://lorempixel.com/g/400/200/">
&#13;
&#13;
&#13;

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

&#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;
&#13;
&#13;

答案 1 :(得分:0)

使用background-image

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

答案 2 :(得分:-1)

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

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