CODEWITHSUNDEEP
htmlimagehttp-status-code-404src
Max Blankenship
Max Blankenship

Reputation: 31

HTML img src returning a 404 not found error despite everything in order

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 = "/socket.io/socket.io.js">
    </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?

Upvotes: 3

Views: 56463

Answers (9)

Mario
Mario

Reputation: 31

I have noticed that some web frameworks don't allow you to have your images or videos anywhere you want. For example, while looking for the solution for this problem, I remembered that Flask (the framework I was using) does not render any images or videos that are not in the "static" folder.

I don't know if other frameworks have something like this, but if you think you have everything in order, you should take this into consideration.

Upvotes: 3

viji bala
viji bala

Reputation: 1

put the full URL link. eg: your server name test.com http://test.com/imagefoldername/imagename

Upvotes: -1

ibrahim s
ibrahim s

Reputation: 313

you should try this <img src= "./images/cribbage.png" width= "970" height="224"/>

Upvotes: 0

Kurisani Chauke
Kurisani Chauke

Reputation: 1

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

Upvotes: 0

Irfan Pathan
Irfan Pathan

Reputation: 11

<form id="form1" runat="server">
<div>
<img src="../../../Images/Gallery/error2.jpg"  width= "500" height="300" CssStyle="text-align:center"/>
</div>
</form>
</asp:Panel>

Upvotes: 0

user8716887
user8716887

Reputation:

Is the images folder in the right place? Make sure you can access to the folder from the browser.

Upvotes: 0

Jos&#233; Caicedo
Jos&#233; Caicedo

Reputation: 11

check on the folder that the name of the image is in lowercase because it is case sensitive

Upvotes: 1

Martin Kariuki
Martin Kariuki

Reputation: 77

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

Upvotes: 1

connor.gregson
connor.gregson

Reputation: 61

try:

<img src= "/images/cribbage.png" width= "970" height="224"/>

Upvotes: 0

Related Questions