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"/>
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.
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.
I found that skipping the quotation marks "" around the file and location name displayed the image... I am doing this on MacBook....
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.
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.
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.
img {_x000D_
width: 200px;_x000D_
}<img src="https://image.ibb.co/gmmneK/children_593313_340.jpg"/>_x000D_
_x000D_
<img src="https://image.ibb.co/e0RLzK/entrepreneur_1340649_340.jpg"/>_x000D_
_x000D_
<img src="https://image.ibb.co/cks4Rz/typing_849806_340.jpg"/>please see the above code.
Source: Stackoverflow.com