2

Tengo un contenedor donde se cargará una imagen. el detalle es que aparece un contorno alrededor del elemento img que no es su borde, y no se a que se deba.

introducir la descripción de la imagen aquí

*{
background:black;
}
.image-shoe {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
    }
    #image_shoe {
        object-fit: cover;
        width: 100%;
        height: 100%;
        border:none;
        margin-bottom: 10px;
        outline: none;
    }
    .file-upload {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    #register .camera-icon {
        background-color: #29fd53;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        width: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 50px;
        padding: 50px;
        color: #fff;
    }
<div class="image-shoe col-md-4">
                <div class="file-upload">
                    <img alt="" id="image_shoe">
                    <label for="selected_image_kicks" class="camera-icon">
                        <i class="fal fa-camera"></i>
                    </label>
                    <input type="file" id="selected_image_kicks" style="display:none">
                </div>
            </div>

Lo peor es que en el snnipet que añadi no se muestra, pero se trata del contorno de la imagen. El elemento img no tiene una imagen cargada aun, pero se cargará con js una vez se seleccione.

1
  • Es el bloque de codigfo importante, con todos los estilos aplicados desde el contenedor hacia adentro. El icono no aparece porque es un icono de fontawesome y yo tengo la libreria descargada, entonces no se como hacer para mostrarlo. Commented el 4 feb. 2023 a las 15:12

2 respuestas 2

2

Cuando una imagen no está cargada se muestra este borde, ejemplo:

*{
  background-color:black;
}

img{
  width: 100px;
  height:120px;
  text-indent: -999px;
}
<img>

La solución simple es colocar una imagen default de un pixel o transparente. Ya que de todas maneras tu luego la cambias con javascript

Ejemplo

*{
  background-color:black;
}

img{
  width: 100px;
  height:120px;
  text-indent: -999px;
}
<img src="src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Otra solución sería derechamente no mostrar la imagen cuando no tiene el atributo scr cargado, algo como:

#image_shoe[src=""] {
   display: none;
}

o de modo para todas las imágenes:

img[src=""] {
   display: none;
}
2

La respuesta de arriba es correcta, cuando una imagen no tiene un SRC se muestra ese borde, pero, una mejor forma de eliminar esos bordes es usar:

img[src=""] {
    display: none;
}

Esto ocultará la imagen hasta que tenga un SRC

1
  • una mejor forma......que también está en esa respuesta
    – Yussef
    Commented el 5 feb. 2023 a las 0:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.