13

I'm kind of new to HTML. I'm trying to display an image on my website but for some reason, it just shows a blue box with a question mark in it. I've looked everywhere on the internet, but none of the solutions seemed to work for me. I've tried:

<img src="iwojimaflag.jpg"/>

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

<img src="Applications/MAMP/htdocs/Symfony/src/Acme/WebBundle/Resources/public/images/iwojimaflag.jpg"/>
Jatin
  • 3,065
  • 6
  • 28
  • 42
Gretta
  • 223
  • 2
  • 5
  • 13
  • Where is your image stored relative to your HTML file (ex: HTML is at "myapp/index.html" and image is at "myapp/images/myimage.jpg" ? – tymeJV Jun 17 '14 at 00:35
  • image: "/Resources/public/images/iwojimaflag.jpg" -------------------- html: "/Resources/views/Default/index.html.twig" – Gretta Jun 17 '14 at 00:40

7 Answers7

13

Just to expand niko's answer:

You can reference any image via its URL. No matter where it is, as long as it's accesible you can use it as the src. Example:

Relative location:

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

The image is sought relative to the document's location. If your document is at http://example.com/site/document.html, then your images folder should be on the same directory where your document.html file is.

Absolute location:

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

or

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

In this case, your image will be sought from the document site's root, so, if your document.html is at http://example.com/site/document.html, the root would be at http://example.com/ (or it's respective directory on the server's filesystem, commonly www/). The first two examples are the same, since both point to the same host, Think of the first / as an alias for your server's root. In the second case, the image is located in another host, so you'd have to specify the complete URL of the image.

Regarding /, . and ..:

The / symbol will always return the root of a filesystem or site.

The single point ./ points to the same directory where you are.

And the double point ../ will point to the upper directory, or the one that contains the actual working directory.

So you can build relative routes using them.

Examples given the route http://example.com/dir/one/two/three/ and your calling document being inside three/:

"./pictures/image.png"

or just

"pictures/image.png"

Will try to find a directory named pictures inside http://example.com/dir/one/two/three/.

"../pictures/image.png"

Will try to find a directory named pictures inside http://example.com/dir/one/two/.

"/pictures/image.png"

Will try to find a directory named pictures directly at / or example.com (which are the same), on the same level as directory.

arielnmz
  • 8,354
  • 9
  • 38
  • 66
  • Ok so I tried going to "http://localhost/Applications/MAMP/htdocs/Symfony/src/Acme/WebBundle/Resources/public/images/iwojimaflag.jpg" and I got a 404 not found error, but I double checked that the picture is there!! I also double checked that the url is right! – Gretta Jun 17 '14 at 16:55
  • I also tried `' and replaced the `...` with what you said above but according to my directory. Didnt work. – Gretta Jun 17 '14 at 16:56
  • If you're specifying the host's name you should precede it by http:// or whatever protocol you use to retrieve the image. Also note that the root of your site =/= the root of your filesystem. Http://localhost may point to /var/www/ not /. – arielnmz Jun 17 '14 at 16:58
  • You see, when you start a server, it'll set a *virtual root* on the filesystem, and it'll be located at the folder it's configured to be the **website's root**. Let's say your filesystem's root is `/`, and your server is configured to set it's root to `/var/www/`, so `http://localhost/` will start at `/var/www/`, and if you try to access `http://localhost/pic/image.png` you have to have your image at `/var/www/pic/image.png` – arielnmz Jun 17 '14 at 17:06
  • Likewise, if your document is at `http://localhost/doc/index.html` or `/var/www/doc/index.html` on the filesystem and if your document calls for an image with `src=pic/image.png` your image should be at `/var/www/doc/pic/image.png`. Or if src=/pic/image.png then it'll have to be at `/var/www/pic/image.png` – arielnmz Jun 17 '14 at 17:28
  • @Gretta are you sure that your `src` attribute reads `images/image.jpg`? – arielnmz Jun 17 '14 at 17:30
  • Yup. `` I literally copied and pasted that. Though I checked the file type and it says it's a jpeg image. But the extension is jpg..? – Gretta Jun 17 '14 at 17:36
  • The extension doesn't matter, have you tried removing that trailing `/`? have you tried with another image (on another host, like http://goo.gl/AJm0rS ?) – arielnmz Jun 17 '14 at 17:42
  • Yes, I've tried using another image. I don't know what you mean by the trailing `/` because I don't see it. The image only shows up if I just type in the website address that I got it from. – Gretta Jun 17 '14 at 18:11
  • Instead of `` use ``, what do you mean by *just type in the website address that I got it from*? where do you type the address? – arielnmz Jun 17 '14 at 18:16
4

Lets look at ways to reference the image.

Back a directory

../

Folder in a directory:

 foldername/

File in a directory

 imagename.jpg

Now, lets combine them with the addresses you specified.

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

The first common directory referenced from the html file is three back:

 ../../../

It is in within two folders in that:

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

And you've reached the image:

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

Note: This is assuming you are accessing a page at domain.com/Resources/views/Default/index.html as you specified in your comment.

  • so... what am I supposed to write in my code? `` and that also didn't work. – Gretta Jun 17 '14 at 16:58
  • Well..... what is the address in your address bar when you are viewing index.html? –  Jun 17 '14 at 18:45
  • 2
    You already wrote it up there. `../Resources/views/Default/index.html` – Gretta Jun 18 '14 at 01:08
  • So... you already have the answer then. Just look above. If it doesn't work, look in your browser debugger and address errors... or fix your website setup. Good luck –  Jun 18 '14 at 01:34
2

img {
  width: 200px;
}
<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"/>

please see the above code.

Arshiya Khanam
  • 613
  • 6
  • 12
0

If you put <img src="iwojimaflag.jpg"/> in html code then place iwojimaflag.jpg and html file in same folder.

If you put <img src="images/iwojimaflag.jpg"/> then you must create "images" folder and put image iwojimaflag.jpg in that folder.

Arshid KV
  • 9,631
  • 3
  • 35
  • 36
-1

I confess to not having read the whole thread. However when I faced a similar issue I found that checking carefully the case of the file name and correcting that in the HTML reference fixed a similar issue. So local preview on Windows worked but when I published to my server (hosted Linux) I had to make sure "mugshot.jpg" was changed to "mugshot.JPG". Part of the problem is the defaults in Windows hiding full file names behind file type indications.

Clyde
  • 1
-2

Here are the most common reasons

  • Incorrect file paths

  • File names are misspelled

  • Wrong file extension

  • Files are missing

  • The read permission has not been set for the image(s)

Note: On *nix systems, consider using the following command to add read permission for an image:

chmod o+r imagedirectoryAddress/imageName.extension

or this command to add read permission for all images:

chmod o+r imagedirectoryAddress/*.extension

If you need more information, refer to this post.

Community
  • 1
  • 1
Farhad Maleki
  • 3,451
  • 1
  • 25
  • 20
-3

I found that skipping the quotation marks "" around the file and location name displayed the image... I am doing this on MacBook....

Marcin
  • 1