是否有可能在CSS中设置一个img标签的src属性的等效?

是否可以在CSS中设置src属性值? 在大多数情况下，我们这样使用它:

<img src="pathTo/myImage.jpg" />

我希望它是这样的

<img class="myClass" />

.myClass {
    some-src-property: url("pathTo/myImage.jpg");
}

我想知道是否有一种方法可以做到这一点，而不使用CSS中的background或background-image属性。

当前回答

使用CSS，这是做不到的。但是，如果你正在使用JQuery，像这样的东西可以做到:

$("img.myClass").attr("src", "http://somwhere");

其他回答

使用CSS，这是做不到的。但是，如果你正在使用JQuery，像这样的东西可以做到:

$("img.myClass").attr("src", "http://somwhere");

据我所知，你不能。CSS是关于样式的，图像的src是关于内容的。

或者你也可以这样做我在网上找到的。

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">

.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

这样可以有效地隐藏图像和填充背景。哦，这是一个黑客，但如果你想要一个IMG标签与alt文本和背景，可以不使用JavaScript缩放?

在我现在正在做的一个项目中，我创建了一个英雄块树枝模板

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>

如果你不想设置背景属性，那么你不能只使用CSS来设置图像的src属性。

您也可以使用JavaScript来完成这一任务。

有些数据我会留在HTML中，但最好在CSS中定义src:

<img alt="Test Alt text" title="Title text" class="logo">

.logo {
    content:url('../images/logo.png');
}

推荐文章