Search code examples
htmlweb2py

HTML image is broken, can't display picture when trying to use image from my computer


So I'm having trouble with my HTML wherein I can display a picture from another site, but when I try to show a picture from my own computer the link is broken and I get a little blue box with a ? in it.

I have tried using the picture's relative path, absolute path, and putting the pic in the same folder as the html. Here is an example, where the pic is in the same folder as the HTML.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="bed.jpg" alt="bed" style="width:100px;height:38px"></body>
</html>

I have also tried this code with and without the style element. Nothing seems to be working.

If it makes any difference, I am doing this in web2py.


Solution

  • <img src="bed.jpg" alt="bed" style="width:100px;height:38px">
    

    In the above, bed.jpg is a relative URL, so it will simply be added onto the URL of the current page. That will result in web2py returning either a 404 response or the HTML of the current page.

    If "bed.jpg" is a static file, you should use web2py's mechanism for serving static files as described here (i.e., put the file in the application's /static folder, maybe in a subfolder for images, such as /static/images). It is also advisable to use the URL() helper to generate URLs to be served by web2py, so your HTML should look something like:

    <img src="{{=URL('static', 'images/bed.jpg')}}" alt="bed" style="width:100px;height:38px">