[html] Image is not showing in browser?

<body style="background-color: paleturquoise">
    <h2 style="color: red">Duke's soccer League: Home Page<br/></h2>
    <ul style="list-style-type: circle">
        <li style="font-size: larger"><a href="league_list.in">All Leagues list</a></li>
        <li style="font-size: larger">Register for a League (TBA)<br/><br/></li>
    </ul>
    <h2 style="color: red">League Administrator</h2>
    <ul style="list-style-type: square">
        <li style="font-size: larger"><a href="add_league.in">Add a new League (TBA)</a></li>

        <img  src="C:\Users\VIRK\Desktop\66.jpg" width="400" height="400" ></img>

</ul>
</body>  

I am currently practice with JSP and I try this html code to make a web page on NetBeans IDE 7.0 but when I'm build and run the page no error in code but the image is not showing in the browser.

Edited:

enter image description here

Here I have given the screenshot of the NetBeans IDE where you can see the image is existing in Web-INF folder and the index.jsp page too and I tried with "/" before the image name but it won't work. The exact path of my project is C:\Users\VIRK\Documents\NetBeansProjects\practiceJSP .

<img  src="/66.jpg" width="400" height="400" ></img>

This question is related to html image jsp

The answer is


You put inside img tag physical path you your image. Instead of that you should put virtual path (according to root of web application) to your image. This value depends on location of your image and your html page.

for example if you have:

/yourDir
-page.html
-66.jpg

in your page.html it should be something like that:

<img  src="66.jpg" width="400" height="400" ></img>

second scenario:

/images
-66.jpg
/html
page.html

So your img should look like:

<img  src="../images/66.jpg" width="400" height="400" ></img>

If we are using asp.net "FileUpload" control and want to preview image before upload we can use below code.

<asp:FileUpload ID="fileUpload" runat="server" Style="border: none;" onchange="showpreview(this);" />
<img id="previewImage" src="C:\fakepath\natureImage.jpg">


<script>
    function showpreview(Imagepath) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#previewImage").attr("src", e.target.result);
        }
        reader.readAsDataURL(Imagepath.files[0]);
    }
</script>

do not place *jsp or *html in root folder of webapp and images you want to display in same root folder browser cannot acess the image in WEB-INF folder


Your path should be like this : "http://websitedomain//folderpath/66.jpg">

<img  src="http://websitedomain/folderpath/66.jpg" width="400" height="400" ></img>

Another random reason for why your images might not show up is because of something called base href="http://..." this can make it so that the images file doesn't work the way it should. Delete that line and you should be good.


all you need to do is right click on the jsp page in the browser, which might look like "localhost:8080/images.jpg, copy this and paste it where the image is getting generated


I had same kind of problem in Netbeans.

I updated the image location in the project and when I executed the jsp file, the image was not loaded in the page.

Then I clean and Built the project in Netbeans. Then it worked fine.

Though you need to check the image actually exists or not using the image URL in the browser.


the easy way to do it to place the image in Web Content and then right click on it and then open it by your eclipse or net beans web Browser it will show the page where you can see the URL which is the exact path then copy the URL and place it on src=" paste URL " ;


I had a problem where the images would not show and it wasn't the relative path. I even hard coded the actual path and the image still did not show. I had changed my webserver to run on port 8080 and neither

<img src="c:/public/images/<?php echo $image->filename; ?>" width="100" />
<img src="c:/public/images/mypic.jpg" width="100" />

would not work.

<img src="../../images/<?php echo $photo->filename; ?>" width="100" />

Did not work either. This did work :

<img src="http://localhost:8080/public/images/<?php echo $image->filename; ?>" width="100" />

You need to import your image from the image folder. import name_of_image from '../imageFolder/name_of_image.jpg';

<img src={name_of_image} alt=''>

Please refer here. https://create-react-app.dev/docs/adding-images-fonts-and-files -


I also had a similar problem and tried all of the above but nothing worked. And then I noticed that the image was loading fine for one file and not for another. The reason was: My image was named image.jpg and a page named about.html could not load it while login.html could. This was because image.jpg was below about and above login. So I guess login.html could refer to the image and about.html couldn't find it. I renamed about.html to zabout.html and re-renamed it back. Worked. Same may be the case for images enclosed in folders.


I don't know where you're running the site from on your computer, but you have an absolute file path to your C drive: C:\Users\VIRK\Desktop\66.jpg

Try this instead:

<img  src="[PATH_RELATIVE_TO_ROOT]/66.jpg" width="400" height="400" />

UPDATE:

I don't know what your $PROJECTHOME is set to. But say for example your site files are located at C:\Users\VIRK\MyWebsite. And let's say your images are in an 'images' folder within your main site, like so: C:\Users\VIRK\MyWebsite\images.

Then in your HTML you can simply reference the image within the images folder relative to the site, like so:

<img  src="images/66.jpg" width="400" height="400" />

Or, assuming you're hosting at the root of localhost and not within another virtual directory, you can do this (note the slash in the beginning):

<img  src="/images/66.jpg" width="400" height="400" />

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to image

Reading images in python Numpy Resize/Rescale Image Convert np.array of type float64 to type uint8 scaling values Extract a page from a pdf as a jpeg How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter? Angular 4 img src is not found How to make a movie out of images in python Load local images in React.js How to install "ifconfig" command in my ubuntu docker image? How do I display local image in markdown?

Examples related to jsp

Difference between request.getSession() and request.getSession(true) A child container failed during start java.util.concurrent.ExecutionException The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path Using if-else in JSP Passing parameters from jsp to Spring Controller method how to fix Cannot call sendRedirect() after the response has been committed? How to include js and CSS in JSP with spring MVC How to create an alert message in jsp page after submit process is complete getting error HTTP Status 405 - HTTP method GET is not supported by this URL but not used `get` ever? How to pass the values from one jsp page to another jsp without submit button?