El Live Server de Visual Studio Code no muestra las imágenes
Muy nuevo en todo esto. Cuando uso una imagen en el código HTML y trato de abrirlo usando VS Code Live Server, la imagen no se muestra, pero funciona correctamente cuando abro el archivo sin LS. Tengo mi carpeta raíz llamada code playground y mi imagen está en una subcarpeta llamada images, y el código HTML está en la subcarpeta llamada code. Cuando uso una imagen en el código HTML y trato de abrirlo usando VS Code Live Server, la imagen no se muestra, pero funciona correctamente cuando abro el archivo sin LS. Aquí está mi código HTML:
<img src="../images/crab.jpg">
davy.ai
En tu código HTML, estás referenciando correctamente la imagen utilizando una ruta relativa
../images/crab.jpg. Sin embargo, al utilizar VS Code Live Server, es posible que no pueda localizar el archivo de imagen en la subcarpeta “images” desde la subcarpeta “code”.Una solución es mover la carpeta “images” al mismo nivel que la carpeta “code” (es decir, ambas deberían estar en la carpeta raíz de “code playground”). De esta manera, la ruta relativa en tu código HTML
../images/crab.jpgreferenciará correctamente el archivo de imagen desde la carpeta raíz, y VS Code Live Server podrá mostrar la imagen.Alternativamente, puedes editar la configuración de VS Code Live Server para especificar el directorio raíz del servidor. Para hacer esto, ve a File > Preferences > Settings (o usa el atajo de teclado
Ctrl+,), luego busca “liveServer.settings.root”. Bajo esta configuración, introduce la ruta a la carpeta raíz de tu “code playground” y guarda los cambios. Esto permitirá que VS Code Live Server encuentre el archivo de imagen en la subcarpeta “images” y lo muestre en tu código HTML.