Ronit Ghosh Ronit Ghosh - 6 months ago 37
HTML Question

Why image is not displaying in Bootstrap written in phpstorm under laravel blade file?

Apologies if this is an idiotic question: I used the following

src
declaration within an
img
tag to display an image on a
Bootstrap
website in
phpstorm
under a
laravel
blade file:
src="C:\Users\MAHE\Pictures\Wallpapers\photo.jpg"
.

The image does not display; it's just invisible because the mouse pointer is showing the hand symbol when hovered; however, the image displays perfectly when the
src
declaration is:
src="http://weknowyourdreamz.com/images/apple/apple-02.jpg"

Answer

The first link is pointing locally (C: drive). Are you using a localhost or displaying it locally or is it live on a server?

If your website is hosted locally:

Use a relative path, example: images/file_01.jpg

If your website is live:

Use a link to an image that is on a server, as the path is meaningless in this context.

EDIT:

(Elaboration on relative paths to give more clarity as per comment)

The location for the relative path would be wherever the file is in relation to the file that you are trying to link from, so you would need to host the file with the site in order to achieve this. The link itself would depend on your file structure, a typical link would read such as: ../images/cat_01.jpg (the preceding "/" , "./", "../" represent Root directory, current working directory, and parent directory, respectively).

This Link provides a good summary of Relative vs Absolute paths.

If you cannot achieve this then host the image wherever you can and provide the entire URL for the image. Example src="http://www.forexample.com/images/cat_01.jpg".

As you should now be able to see, this is why the second link works. Your file can actually access this image whereas the first link points to a specific location on a computer - this makes no sense in a web environment.