Soy un poco nuevo en HTML. Estoy tratando de mostrar una imagen en mi sitio web, pero por alguna razón, simplemente se muestra un cuadro azul con un signo de interrogación en ella. He buscado por todas partes en internet, pero ninguna de las soluciones que se parecía a trabajar para mí. He intentado:

<img src="iwojimaflag.jpg"/>

<img src="images/iwojimaflag.jpg"/>

<img src="Applications/MAMP/htdocs/Symfony/src/Acme/WebBundle/Resources/public/images/iwojimaflag.jpg"/>
  • Dónde está tu imagen almacenada en relación a su archivo HTML (por ejemplo: HTML, en «myapp/index.html» y la imagen es en «myapp/images/myimage.jpg» ?
  • imagen: «/Resources/public/images/iwojimaflag.jpg» ——————– html: «/Resources/views/Default/index.html.rama»
InformationsquelleAutor Gretta | 2014-06-17

7 Comentarios

  1. 4

    Para expandir niko‘s respuesta:

    Puede hacer referencia a cualquier imagen a través de su URL. No importa donde esté, siempre es accesible, se puede utilizar como el src. Ejemplo:

    Ubicación relativa:

    <img src="images/image.png">

    La imagen se solicita relativa a la ubicación del documento. Si el documento está en http://example.com/site/document.html, entonces su images carpeta debe estar en el mismo directorio donde su document.html archivo.

    Ubicación absoluta:

    <img src="/site/images/image.png">
    <img src="http://example.com/site/images/image.png">

    o

    <img src="http://another-example.com/images/image.png">

    En este caso, la imagen se buscará del documento raíz del sitio, por lo tanto, si su document.html es en http://example.com/site/document.html, la raíz sería en http://example.com/ (o del respectivo directorio en el servidor del sistema de ficheros, comúnmente www/). Los primeros dos ejemplos son el mismo, ya que ambos apuntan a la misma máquina, Creo que de la primera / como un alias para tu raíz del servidor. En el segundo caso, la imagen se encuentra en otro host, por lo que tendrías que especificar la dirección URL completa de la imagen.

    Respecto /, . y ..:

    La / símbolo devolverá siempre la raíz de un sistema de ficheros o en el sitio.

    El único punto ./ puntos en el mismo directorio donde está.

    Y el doble punto de ../ se apunte a la esquina superior de directorio, o la que contiene el directorio de trabajo.

    Así que usted puede construir relativa rutas con ellos.

    Ejemplos de la ruta http://example.com/dir/one/two/three/ y su llamar documento que se está dentro de three/:

    "./pictures/image.png"

    o simplemente

    "pictures/image.png"

    Intentará encontrar un directorio llamado pictures dentro de http://example.com/dir/one/two/three/.

    "../pictures/image.png"

    Intentará encontrar un directorio llamado pictures dentro de http://example.com/dir/one/two/.

    "/pictures/image.png"

    Intentará encontrar un directorio llamado pictures directamente en / o example.com (que son el mismo), en el mismo nivel que directory.

    • Ok, así que traté de ir a «localhost/Aplicaciones/MAMP/htdocs/Symfony/src/Acme/WebBundle/…» tengo un error 404 not found, pero yo verificó que la imagen está ahí!! Yo también verificó que la dirección url es correcta!
    • También traté de <img src="..."/>' and replaced the … » con lo que te dijo el de arriba, pero de acuerdo a mi directorio. No trabajo.
    • Si estás especificando el nombre del anfitrión debe preceder por http:// o lo que el protocolo que use para recuperar la imagen. También tenga en cuenta que la raíz de su sitio web =/= la raíz de su sistema de ficheros. http://localhost puede apuntar a /var/www/ no /.
    • oh ya me puso http:// no sé por qué no incluir en el comentario
    • Usted ve, cuando se inicia un servidor, la configuración de un raíz virtual en el sistema de archivos, y va a estar ubicado en la carpeta en la que está configurado para ser el sitio web de la raíz. Digamos que el sistema de ficheros raíz se /, y el servidor está configurado para establecer la raíz a /var/www/, así http://localhost/ comenzará a las /var/www/, y si intenta obtener acceso a http://localhost/pic/image.png usted tiene que tener su imagen en /var/www/pic/image.png
    • Del mismo modo, si el documento está en http://localhost/doc/index.html o /var/www/doc/index.html en el sistema de archivos y el documento pide una imagen con src=pic/image.png su imagen debe ser de al /var/www/doc/pic/image.png. O si src=/pic/imagen.png, a continuación, tendrá que ser en /var/www/pic/image.png
    • está seguro de que su src atributo lee images/image.jpg?
    • Yup. <img src="images/iwojimaflag.jpg"/> Yo, literalmente copiado y pegado que. Aunque he comprobado que el tipo de archivo y se dice que es una imagen jpeg. Pero la extensión es jpg..?
    • La extensión no importa, has probado a quitar que trailing /? ¿has probado con otra imagen (en otro host, como goo.gl/AJm0rS ?)
    • Sí, he probado con otra imagen. No sé a qué te refieres por detrás de la / porque yo no lo veo. La imagen sólo se muestra si yo simplemente escriba la dirección del sitio web que lo consiguió.
    • En lugar de <img src="…"/> uso <img src="…">, ¿qué significa escriba la dirección del sitio web que lo tengo de? ¿dónde te escriba la dirección?

  2. 3

    Permite buscar formas para hacer referencia a la imagen.

    De nuevo un directorio

    ../

    Carpeta en un directorio:

     foldername/

    Archivo en un directorio

     imagename.jpg

    Ahora, permite combinarlos con las direcciones especificadas.

     /Resources/views/Default/index.html
     /Resources/public/images/iwojimaflag.jpg

    El primer directorio común de referencia desde el archivo html es tres:

     ../../../

    Es en el plazo de dos carpetas en que:

     ../../../public/images/

    Y has llegado a la imagen:

     ../../../public/images/iwojimaflag.jpg

    Nota: Esto es suponiendo que usted está accediendo a una página en domain.com/Resources/views/Default/index.html como se especifica en su comentario.

    • así que… ¿qué se supone que voy a escribir en mi código? <img src="/public/images/iwojimaflag.jpg/>"? Debido a que no funciona para mí. También traté de <img src="../../../public/images/iwojimaflag.jpg"/> y que también no funciona.
    • Bueno….. ¿cuál es la dirección en tu barra de direcciones cuando se está viendo index.html?
    • Ya escribió hasta allí. ../Resources/views/Default/index.html
    • Así que… ya tiene la respuesta. Basta con mirar por encima. Si no funciona, busca en tu navegador depurador y dirección de errores… o revisión de su sitio web el programa de instalación. Buena suerte
  3. 0

    Si pones <img src="iwojimaflag.jpg"/> en el código html, a continuación, coloque iwojimaflag.jpg y un archivo html en la misma carpeta.

    Si pones <img src="images/iwojimaflag.jpg"/>, a continuación, debe crear carpeta «images» y poner la imagen iwojimaflag.jpg en esa carpeta.

    • probé. no trabajo.
  4. 0

    CSS:

    img {
      width: 200px;
    }

    HTML:

    <img src="https://image.ibb.co/gmmneK/children_593313_340.jpg"/>
    
    <img src="https://image.ibb.co/e0RLzK/entrepreneur_1340649_340.jpg"/>
    
    <img src="https://image.ibb.co/cks4Rz/typing_849806_340.jpg"/>

    por favor consulte el código anterior.

  5. -1

    Confieso no haber leído todo el hilo. Sin embargo, cuando me enfrenté a un problema similar, me encontré con que comprobar cuidadosamente el caso del nombre de archivo y la corrección de que en el código HTML de referencia fijo de un problema similar.
    Modo de vista previa local en Windows funcionó, pero cuando publiqué mi server (servidor Linux) yo tenía que asegurarse de que «mugshot.jpg» fue cambiado a «mugshot.JPG». Parte del problema es que los valores predeterminados en Windows ocultar completo detrás de los nombres de archivo tipo de archivo indicaciones.

  6. -1

    He encontrado que omitiendo las comillas «» todo el archivo y el nombre del lugar se muestra la imagen…
    Estoy haciendo esto en el MacBook….

  7. -1

    Aquí están las razones más comunes

    • Archivo incorrecto caminos

    • Los nombres de archivo están mal escritos

    • Extensión de archivo incorrecto

    • Faltan archivos

    • El permiso de lectura no ha sido configurado para la imagen(s)

    Nota:
    En sistemas *nix, considere la posibilidad de usar el siguiente comando para agregar el permiso de lectura para una imagen:

    chmod o+r imagedirectoryAddress/imageName.extension

    o este comando para agregar el permiso de lectura para todas las imágenes:

    chmod o+r imagedirectoryAddress/*.extension

    Si usted necesita más información, consulte esta post.

Dejar respuesta

Please enter your comment!
Please enter your name here