0

Tengo unas imagenes en mi html... Desde VSCode en su propio preview de html si que me las muestra, pero cuando hago run de la app en el navegador no me muestra la imagen que tengo desde una carpeta...

VSCODE introducir la descripción de la imagen aquí

Navegador introducir la descripción de la imagen aquí

  <body>
    <main>
      <!-- Titulo Superior -->        
      <h1 class="text-center titulo display-1 fw-bold my-3">MERCHSTOCK</h1>
      <h2 class="text-center titulo display-4 fw-bold my-3">Venta</h2>
      <!-- Seleccion de Productos (TITULO) -->       
      <div class="card" style="background-color: transparent; border: 0;">
        <div class="card-header"style="background-color: transparent; border: 0;">
        <h2 class="card-header text-center" style="background-color: blueviolet; font-weight: bold;"> Selecciona los productos </h2></div>
      </div>
      <div class="container">
        <div class="row-cols-3 text-center">
          <img src="../images/img1.jpg" style="width: 320px; height: 370px;">
          <img src="https://rattio.es/wp-content/uploads/2020/08/camiseta-termocromica-unisex-la-sra-tomasa-1.jpg" alt="Camiseta Termocromatica Chica" style="width: 320px; height: 370px;">
          <img src="https://rattio.es/wp-content/uploads/2020/08/camiseta-termocromica-unisex-la-sra-tomasa-2.jpg" alt="Camiseta Termocromatica Chico" style="width: 320px; height: 370px;">
        </div>
      </div>

    
      </main>
  </body>
</html>
7
  • Como es la estructura de archivos de tu proyecto? Si dices que no funciona aun con imágenes sin espacios, pueda que sea por tema de rutas.
    – OCHOA
    Commented el 7 jun. 2023 a las 17:31
  • No es buena práctica tener espacios en el nombre de las imágenes, en windows puede que funcione pero en otros sistemas no. También según la ruta que nos comentas tienes un index.html y en el mismo nivel una carpeta /images con el archivo dentro? Puedes compartir tu estructura?
    – Skotpx
    Commented el 7 jun. 2023 a las 17:40
  • Hola. En primer lugar es una mala práctica usar espacios o acentos en nombres de archivos destinados a contextos de URL. Considera ponerlo así: /images/Logo+Alegre+Pero+Peligroso.jpg o bien renombra el archivo a algo como: Logo_Alegre_Pero_Peligroso.jpg. Si aún así no funciona, revisa la ruta del archivo donde está el div, y si ese directorio contiene un directorio hijo llamado images
    – A. Cedano
    Commented el 7 jun. 2023 a las 17:42
  • Por favor, no publiques imágenes de código fuente, publica el código como texto. ¿Qué status te devuelve el navegador para ese recurso?
    – jachguate
    Commented el 7 jun. 2023 a las 19:58
  • 1
    Ve a la consola del navegador y verifica el error en la carga de la imagen, allí te dirá la ruta que estas llamando la imagen y sabrás que tienes mal Commented el 7 jun. 2023 a las 20:16

1 respuesta 1

0

Todo viene a partir de las carpetas del proyecto... Si cargo las imágenes en la carpeta static, estas si que me las publica bien, en cambio si lo hago desde la carpeta llamada images no.

No entiendo bien el porque ya que las 2 carpetas están a la misma altura... Pero esta es la solución.

No se si es parte de cuando ejecuto el codigo de python el servidor generado por Flask no deja servir imágenes fuera de esa carpeta... Ya que probando el Live Server y el propio preview de VSCode si que me las mostraba...

  <div class="container">
    <div class="row-cols-3 text-center">
      <img src="../static/img1.jpg" alt="img1" style="width: 320px; height: 370px;">
      <img src="https://rattio.es/wp-content/uploads/2020/08/camiseta-termocromica-unisex-la-sra-tomasa-1.jpg" alt="Camiseta Termocromatica Chica" style="width: 320px; height: 370px;">
      <img src="https://rattio.es/wp-content/uploads/2020/08/camiseta-termocromica-unisex-la-sra-tomasa-2.jpg" alt="Camiseta Termocromatica Chico" style="width: 320px; height: 370px;">
    </div>
  </div>

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.