Cómo agregar imágenes de mi PC a mi página HTML

Puede agregar imágenes a sus páginas html fácilmente, le estoy explicando dos ejemplos:

Primer proceso:

En primer lugar, su página html y las imágenes deben estar en la misma carpeta.

Ese es un proceso fácil para vincular imágenes de PC a páginas html.

solo proporcione el nombre de la imagen (por ejemplo: – sol) y la extensión (por ejemplo: – .jpg, .png, .gif ) en la etiqueta img.

vea el siguiente ejemplo para esto : –

Index.html

”Sun”

Segundo proceso

Si se cambia la ubicación de la carpeta html y de la carpeta img, entonces proporcionará la ubicación completa de la PC: le estoy dando el ejemplo:

Suponga que la ubicación de su imagen está en la carpeta de imágenes de d: drive y su html está en el escritorio o en cualquier lugar de la PC:

Entonces su etiqueta img debería verse así.

”Sol”

Eso depende de dónde se encuentre su página HTML.

Si su página html está en vivo en Internet, entonces tiene una URL de protocolo de hipertexto de Internet que comienza con http: // , seguido de un nombre de dominio o un número de IP, luego una barra diagonal y un nombre de archivo de página html, algo así: /mypage.html

¿Es eso lo que tiene tu página? Si es así, para obtener una imagen de su PC para que aparezca en la página, debe hacer esto.

Primero, debe usar algún tipo de herramienta para cargar la imagen desde su PC a la computadora host que está sirviendo la página a Internet en general.

Normalmente, esta sería una herramienta FTP como Filezilla. Sin embargo, muchas cuentas de hosting incluirán una herramienta llamada administrador de archivos que también puede cargar la imagen.

Si la máquina anfitriona que sirve la página es una máquina académica, por ejemplo, si usted es un estudiante universitario y la página está en su cuenta de estudiante, entonces puede tener otras herramientas que podría usar que la escuela quiere y espera que use.

Pero el principio es siempre el mismo. Debe cargar la imagen en su servidor o en algún servidor en alguna parte. Realmente no puede servir la imagen a una página web html en Internet desde su máquina personal. Lo que sucederá es típicamente esto. Debido a que su máquina tiene la imagen y ha intentado “pegar” la imagen en el html de su página web, la imagen PODRÍA aparecer para usted, pero no se mostrará para nadie más. Y estarás avergonzado.

Una vez que la imagen se carga en el servidor, utiliza una etiqueta de imagen, un poco de código HTML, para indicarle al navegador que está viendo la página que solicite la imagen y la muestre en la vista del navegador de su página. Como han dicho otros aquí, el código se verá así, como mínimo.

Edita el html de la página, inserta ese bit de código y la imagen se mostrará desde donde la cargó en el navegador.

Controlar dónde aparece, posicionarlo, etc. es bastante más complicado.

Resumen: 1. Cargue la imagen en el servidor donde se encuentra la página y 2: edite la página html para incluir un código fuente de imagen html para mostrar la imagen cargada.

La etiqueta que se utilizará es:

Es posible que haya visto muchas etiquetas html que tienen una etiqueta de apertura y una etiqueta de cierre, la etiqueta de imagen no cae en la categoría de una etiqueta de cierre automático.

Sintaxis: < atributos img />

El atributo obligatorio que se utilizará es src. Este atributo especifica la ubicación de la imagen en el navegador. El valor de este atributo cambia de acuerdo con los siguientes escenarios

1) Si la imagen está en la misma carpeta que el archivo .html

  • Copie la imagen que desea mostrar en la página web en la misma carpeta donde se encuentra su archivo .html.
  • Agregue el valor al atributo src como su nombre de imagen con su extensión
  • Por ejemplo:

2) Si la imagen está en una carpeta diferente

  • Haga clic derecho en la imagen y vaya a propiedades
  • Copie la ubicación de la imagen.
  • Cambie las barras diagonales inversas `\` a barras diagonales ‘/’
  • Úselos en valor src seguido de una barra diagonal, nombre de imagen y extensión
  • Por ejemplo:

Los 2 casos anteriores son tediosos y desorganizados cuando tiene varias imágenes, por lo tanto, se prefiere ir con el tercer caso a continuación

3) Organice todas las imágenes en una carpeta determinada

  • Cree una nueva carpeta (digamos imágenes) debajo de la carpeta que contiene el archivo .html
  • Copie todas las imágenes a la carpeta de imágenes
  • Aquí no se necesitan ubicaciones largas, solo el nombre del floder (aquí: imágenes), una barra diagonal seguida por el nombre de la imagen y la extensión
  • Por ejemplo Mrinmoy Mondal

Las imágenes HTML se definen con la etiqueta .

El archivo fuente (src), el texto alternativo (alt), el ancho y la altura se proporcionan como atributos

10

La etiqueta HTML para agregar imagen a la página es
”picture” (si “picture.jpg” en la misma carpeta)

Si la imagen no está en la misma carpeta, le daremos la dirección relativa a la página HTML

Cree una carpeta ‘imágenes’ en su carpeta de proyecto y coloque su imagen en eso.

projectfolder / images / some-image.jpg sería su camino a la imagen.

Después de eso, agregue la etiqueta a su página HTML y especifique la ruta en el atributo src.

Descripción de algunas imágenes

Hola,

SI! puedes eso … usando etiquetas de archivos HTML.

Sígueme a través de fiverr

Hay una etiqueta llamada ancla que le ayuda a vincular imágenes o canciones desde la PC a su página para usarlas.

Lo anterior le ayudará a vincular la imagen.

Y asegúrese de que si se trata de una página HTML sin conexión, debe colocar la imagen y el archivo de su página web en el mismo lugar / carpeta

Gracias 🙂

esto se utiliza para dar cualquier mensaje, supongamos que proporcionó una ruta incorrecta de la imagen, entonces puede dar cualquier mensaje dentro de las comillas

Recuerde siempre intentar guardar su imagen en esa carpeta en la que guardó sus archivos html.

Debe tener (o convertir) la imagen en un formato web, como JPEG o PNG. Luego, debe publicarlo en su sitio e incrustarlo en su página, generalmente usando una etiqueta de imagen. Su imagen local no se puede compartir, pero se puede copiar una copia en su página.