2

I've been completing the DjangoGirls tutorial (very good) to learn how to create a blog using Python and Django. I decided to add an image to the homepage (not covered by the tutorial) but when the code is run I get a 404 error and the image isn't shown.

My HTML code is

img src="logo3.jpg" alt="Me2 logo" style="width:50px;height:50px;"

The image is saved in the same folder as the HTML file. The site is running on Localhost.

I think this may be a similar problem to HTML: Image won't display? but I don't know if my difficulty is affected by the Django/Python setup. Very new to all this, help is appreciated. Thanks.

Community
  • 1
  • 1
Kerst
  • 85
  • 9
  • this is related to your project resources and particularly where they sit relative to this html.. post the project directory with these file locations. also to be clearer, can put a screenshot ( im reading too much into `when the code is run` ) – amdixon Jun 06 '15 at 16:44
  • 2
    You don't put images in the place where the templates are; images are not templates. You'll need to read the [tutorial on static files](https://docs.djangoproject.com/en/1.8/intro/tutorial06/). – Daniel Roseman Jun 06 '15 at 16:57
  • 1
    In fact, the Djangogirls tutorial does cover CSS: images work in exactly the same way. Have another read of [chapter 18](http://tutorial.djangogirls.org/en/css/index.html). – Daniel Roseman Jun 06 '15 at 16:59

1 Answers1

2

Static files such as images, CSS, and JavaScript files are handled differently to what you may be used to.

The official Django site explains it pretty well: https://docs.djangoproject.com/en/1.8/howto/static-files/

If you follow the steps on there, number 1 and 2 should be set by default, so you won't have to change anything.

As outlined in step 3 you simply include {% load staticfiles %} at the top of your html document in the templates folder.

If you want to then include an image, use the following structure, which I have taken directly from the Django site: <img src="{% static "my_app/myexample.jpg" %}" alt="My image"/>

The actual image needs to be located in a certain place in your Django file structure. As seen in point 4, It will look similar to this: my_app/static/my_app/myimage.jpg

my_app
├── static
│   ├── my_app
│   │   ├── myimage.jpg
Wilhelm Klopp
  • 5,030
  • 2
  • 29
  • 37