Images are not appearing

Using Django Forms & APIs
1

I have this structure
structure

my models

class Post(models.Model):
    title = SummernoteTextField()
    title_ar = SummernoteTextField()
    image = models.ImageField(upload_to='blog/static/blog/images',blank=True, null=True)
    body = models.TextField(null=False)
    body_ar = models.TextField(null=False)
    author = SummernoteTextField(max_length=30, null=True)
    author_ar = SummernoteTextField(max_length=30, null=True)
    created_on = models.DateTimeField(auto_now_add=True)
    categories = models.ManyToManyField("Category", related_name="posts")

    def __str__(self):
        return self.title

these are my urls

urlpatterns = [
    path('i18n/', include('django.conf.urls.i18n')),
    path('admin/', admin.site.urls),
]

urlpatterns += i18n_patterns(
    path('blog/', include("blog.urls")),
    path('summernote/', include('django_summernote.urls'))
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

these are my media and static settings

STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

I upload images via admin panel.

I get this error in terminal:

Not Found: /blog/static/blog/images/maket2.png
GET /blog/static/blog/images/maket2.png HTTP/1.1" 404 2514

The path shown when I inspect images in developer tools
/blog/static/blog/images/maket1.png

How I added images

<img src="/{{post.image}}">
2

Don’t confuse the purpose and usage of static files vs media files.

Static files are files that are part of the project itself. Media files are files uploaded while the system is running.

You manage the two sets of files differently, they are not handled the same.

It also matters whether you’re talking about your development environment or your production environment.

In a production-quality deployment, neither of those directories (STATIC_ROOT and MEDIA_ROOT) should be in your project. They should refer to directories outside your project directory, in locations that your web server will have access to.

With that information, see:

Some of the items I see:

  • Your upload_to appears to be referencing your static file directory.
  • You don’t display images by referencing the “image” attribute. You use the url attribute to have Django create the url for a media file.

Also, for full diagnostics here, we’d need to know what web server you’re using and how it is configured for your static and media files.

1 Like
3

Thanks, @KenWhitesell, I’m in the development phase, using Django server.
Can you recommend resources to read more about the difference between media and static files?

what I did and make my photos appear is :

  • changed the upload_to path to a new folder that isn’t for the static files.
  • used the url attribute with the src.
  • MEDIA_ROOT and MEDIA_URL are the same.
4

That’s really all there is to it as far as the difference between them.

When you are moving this into production, you are going to want MEDIA_ROOT and STATIC_ROOT pointing to directories outside your project directory.

1 Like