Ersetzen Sie den Speicherort der Bildquelle mithilfe von CSS

Lesezeit: 2 Minuten

Ich habe eine Website mit einem Bild mit einem src-Attribut und möchte den src-Speicherort dieses Bildes durch ein eigenes Bild ändern. Das Bild befindet sich in einer Div-Komponente. Ich kann den HTML-Code nicht ändern und suche nach Möglichkeiten, ihn bitte nur mit CSS zu ändern.

Div-Komponente:

<div class="application-title">
<img style="margin-top: 3px;height: 45px;" src="https://stackoverflow.com/questions/28832129/image.svgz">
</div>

Bildkomponente (CSS-Datei):

.application-title IMG
{
    float: left;
    margin-top: 5px;
    margin-right: 10px;
    opacity: 1;
    margin-left: 0px;
    visibility: hidden;
}

Möglicherweise haben Sie keinen Zugriff auf den HTML-Code, aber haben Sie Zugriff auf die Bilddatei? Warum nicht einfach das Bild mit dem neuen überschreiben?

– Paulie_D

3. März 2015 um 12:48
Mögliches Duplikat von Ist es möglich, das Äquivalent eines src-Attributs eines img-Tags in CSS festzulegen?

– Oleksandr Sawtschenko

29. August 2017 um 15:33

Sie können ein Hintergrundbild verwenden

.application-title img {
  width:200px;
  height:200px;
  box-sizing:border-box;
  padding-left: 200px;
  /*width of the image*/
  background: url(http://lorempixel.com/200/200/city/2) left top no-repeat;
}

<div class="application-title">
  <img src="http://lorempixel.com/200/200/city/1/">
</div><br />
Original Image: <br />

<img src="http://lorempixel.com/200/200/city/1/">

Mann, du wirst es nicht glauben. Ich habe diese Lösung gerade selbst gefunden. Es ist die Größe und Polsterung der Box, die dafür sorgen, dass es sofort funktioniert.

– Neophil

3. März 2015 um 12:51
Als ich diesen Link sah, dachte ich… booya! css-tricks.com/replace-the-image-in-an-img-with-css

– Neophil

3. März 2015 um 12:52

Hier ist ein weiterer schmutziger Hack 🙂

.application-title > img {
display: none;
}

.application-title::before {
content: url(path/example.jpg);
}

Dies ist die naheliegendste Lösung, es ist jedoch nicht möglich, das Bild seitlich zu verschieben.

– Seph Reed

13. Dezember 2019 um 17:34 Uhr

Sie können Folgendes verwenden: content:url("image.jpg")

<style>
.your-class-name{
    content: url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="your-class-name" src="..."/>

Können Sie bitte klären, wie man einen lokalen URL-Pfad hinzufügt? , ich möchte von ” zu etwas anderem wechseln. /images/..”, aber es funktioniert nicht

– vikramvi

7. Juli 2022 um 11:51
Dies sollte die mit einem Sternchen markierte Antwort sein. Es ersetzt die Bild-URL direkt so, wie Sie es wirklich möchten, ohne Offset-Hacks oder andere Unordnung. Kann auch andere Inhalte (wie einfachen Text) verwenden. IOW, es ist fabelhaft.

– tekHedd

17. Februar um 17:24
@tekHedd Ich stimme zu. Der Browser-Kompatibilität ist auch toll.

– Kyriakos Bekas

25. Mai um 8:14 Uhr

lharby

Sie könnten dies tun, aber es ist hackig

.application-title {
   background:url("/path/to/image.png");
   /* set these dims according to your image size */
   width:500px;
   height:500px;
}

.application-title img {
   display:none;
}

Hier ist ein funktionierendes Beispiel:

http://jsfiddle.net/5tbxkzzc/

14519600cookie-checkErsetzen Sie den Speicherort der Bildquelle mithilfe von CSS

#Bild #CSS #html