here's a confusing thing. first look at the hierarchy of my folders and etc. and see that I have my image, "cribbage.png" under the images folder. I am trying to access this image with the following code in index.html:`
<!doctype html> <html lang = "en"> <head> </head> <body> <h1>Hello World! </h1> <img src= "images/cribbage.png" width= "970" height="224"/> <div id = "future"></div> <form id = "form" id = "chat_form"> <input id = "username" type="text"> <input type = "submit" value="Play"> </form> <script src = "/jquery/dist/jquery.js"></script> <script src = "/"> </body> </html> and yet, when loading the website I get the following and the image is replaced with the broken image icon.
What exactly is wrong here?
18 Answers
The images field is not on the same folder as index.html. Meaning your path should get out of the node_modules folder and then get in the images folder.
you should use / (to get out of the node folder) images and then/ (to get in the images folder )cribbage.png
so ../images/cribbage.png
2check on the folder that the name of the image is in lowercase because it is case sensitive
try:
<img src= "/images/cribbage.png" width= "970" height="224"/> Is the images folder in the right place? Make sure you can access to the folder from the browser.
<form runat="server"> <div> <img src="../../../Images/Gallery/error2.jpg" width= "500" height="300" CssStyle="text-align:center"/> </div> </form> </asp:Panel> In my case, I had too many folders e.i img/images, so I moved all my images from images folder to img folder, and all my images show successfully
you should try this <img src= "./images/cribbage.png" width= "970" height="224"/>
put the full URL link. eg: your server name test.com
1
