Img Tag Path Not Working In Chrome And Firefox

I am using MVC3 Razor and I want to load an image from the local drive for the testing purpose. I wrote the img tag like:

Solution 1:

Chrome and FireFox expect 3 / characters:

<img id="ImgEmployee" src="file:///D:/Photos/14.jpg" alt="Employee" />

If you put only 1 / they should be able to guess, but if you put 2 it'll think you mean 2.

If you omit the file:/// the browsers will guess that is the protocol.

Solution 2:

If your HTML page is also on your local drive, you can do relative linking. Say your HTML file & image is in the same folder, you just use:

<img id="ImgEmployee" src="14.jpg" alt="Employee" />

Explanation: This is a security setting of your browser, so webpages cannot load resources from your computer without your consent.

Solution 3:

Do not give absolute path to the image, use relative path means like this :

If your html file located in c:\project_folder and your images located in

c:\project_folder\Photos then use following image tag

<img id="ImgEmployee" src="Photos/14.jpg" alt="Employee" />

Solution 4:

It works when i moved the image folder(Photos) under the solution folder structure(Without including into the solution also).

<img id="ImgEmployee" src="../../Content/Photos/14.jpg" alt="2" />

Solution 5:

Rather than having src="../../Content/Photos/14.jpg" try "~/content/Photos/14/jpg" the "~/" will point to the root of the site.

Share