Tengo un sitio web que tiene una imagen con un atributo src y me gustaría cambiar la ubicación src de esa imagen con una imagen propia. La imagen vive en un componente div. No puedo cambiar el HTML y estoy buscando formas de cambiarlo usando solo CSS, por favor.
componente div:
<div class="application-title">
<img style="margin-top: 3px;height: 45px;" src="https://stackoverflow.com/questions/28832129/image.svgz">
</div>
Componente de imagen (archivo CSS):
.application-title IMG
{
float: left;
margin-top: 5px;
margin-right: 10px;
opacity: 1;
margin-left: 0px;
visibility: hidden;
}
Puedes usar una imagen de fondo
.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/">-
Hombre, no vas a creer. Acabo de encontrar esa solución yo mismo. Es el tamaño de la caja y el relleno lo que lo haría funcionar instantáneamente.
– Neófilo
3 de marzo de 2015 a las 12:51
-
Vi este enlace y pensé… ¡booya! css-tricks.com/replace-the-image-in-an-img-with-css
– Neófilo
3 de marzo de 2015 a las 12:52
Aquí hay otro truco sucio 🙂
.application-title > img {
display: none;
}
.application-title::before {
content: url(path/example.jpg);
}
-
Esta es la solución más cercana, pero no es posible poner de lado la imagen.
– Seph Reed
13 de diciembre de 2019 a las 17:34
puedes usar: content:url("image.jpg")
<style>
.your-class-name{
content: url("http://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="your-class-name" src="..."/>
-
¿Puede aclarar cómo agregar la ruta de URL local?
, quiero cambiar a otra cosa de “. /images/..” pero no funciona– vikramvi
7 de julio de 2022 a las 11:51
-
Esta debería ser la respuesta destacada. Reemplaza directamente la URL de la imagen como realmente desea, sin cortes de compensación u otro desorden. También puede usar otro contenido (como texto sin formato). IOW es fabuloso.
– tek Hedd
17 de febrero a las 17:24
-
@tekHedd Estoy de acuerdo. El compatibilidad del navegador también es genial
– Kyriakos Bekas
25 de mayo a las 8:14
harby
Podrías hacer esto pero es hacky
.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;
}
Aquí hay un ejemplo de trabajo:
Es posible que no tenga acceso al HTML… pero ¿tiene acceso al archivo de imagen? ¿Por qué no sobrescribir la imagen con la nueva?
– Paulie_D
3 de marzo de 2015 a las 12:48
Posible duplicado de ¿Es posible establecer el equivalente de un atributo src de una etiqueta img en CSS?
– Oleksandr Savchenko
29 de agosto de 2017 a las 15:33