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:

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

It is working with IE. But in Chrome and Firefox it is not getting loaded.

How to set the path for img tag which loads the image from the local drive and works in all browsers?

回答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.

回答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.

回答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" />

回答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" />

回答5:

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

回答6:

I had the same problem. In my case I've just tried:

src="Content/images/photo.png"

on server side. And it works.

In your case:

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