Image is not showing in browser

Question

lt body style  background-color  paleturquoise  gt       lt h2 style  color  red  gt Duke s soccer League  Home Page lt br  gt  lt  h2 gt       lt ul style  list-style-type  circle  gt           lt li style  font-size  larger  gt  lt a href  league list in  gt All Leagues list lt  a gt  lt  li gt           lt li style  font-size  larger  gt Register for a League  TBA  lt br  gt  lt br  gt  lt  li gt       lt  ul gt       lt h2 style  color  red  gt League Administrator lt  h2 gt       lt ul style  list-style-type  square  gt           lt li style  font-size  larger  gt  lt a href  add league in  gt Add a new League  TBA  lt  a gt  lt  li gt            lt img  src  C  Users VIRK Desktop 66 jpg  width  400  height  400   gt  lt  img gt    lt  ul gt   lt  body gt      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       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     lt img  src   66 jpg  width  400  height  400   gt  lt  img gt

User · Answer

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    lt img  src  66 jpg  width  400  height  400   gt  lt  img gt    second scenario    images -66 jpg  html page html   So your img should look like    lt img  src     images 66 jpg  width  400  height  400   gt  lt  img gt

User · Answer

You need to import your image from the image folder  import name of image from     imageFolder name of image jpg    lt img src  name of image  alt    gt  Please refer here  https   create-react-app dev docs adding-images-fonts-and-files -

User · Answer

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

User · Answer

If we are using asp net  FileUpload  control and want to preview image before upload we can use below code    lt asp FileUpload ID  fileUpload  runat  server  Style  border  none   onchange  showpreview this      gt   lt img id  previewImage  src  C  fakepath natureImage jpg  gt     lt script gt      function showpreview Imagepath            var reader   new FileReader            reader onload   function  e                    previewImage   attr  src   e target result                     reader readAsDataURL Imagepath files 0           lt  script gt

User · Answer

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

User · Answer

Your path should be like this    http   websitedomain  folderpath 66 jpg     lt img  src  http   websitedomain folderpath 66 jpg  width  400  height  400   gt  lt  img gt

User · Answer

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   lt img src  c  public images  lt  php echo  image- gt filename    gt   width  100    gt   lt img src  c  public images mypic jpg  width  100    gt    would not work     lt img src        images  lt  php echo  photo- gt filename    gt   width  100    gt    Did not work either  This did work      lt img src  http   localhost 8080 public images  lt  php echo  image- gt filename    gt   width  100    gt

User · Answer

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

User · Answer

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

User · Answer

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    lt img  src   PATH RELATIVE TO ROOT  66 jpg  width  400  height  400    gt    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     lt img  src  images 66 jpg  width  400  height  400    gt    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     lt img  src   images 66 jpg  width  400  height  400    gt

User · Answer

I find out the way how to set the image path just remove the     before the destination folder as  images 66 jpg  not   images 66 jpg  And its working fine for me

User · Answer

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

User · Answer

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

[html] Image is not showing in browser?

Examples related to html

Examples related to image

Examples related to jsp