Load image in html from Path saved in bank with django

I am trying to make a newspaper using Django and MySQL Bank and now I need to list the images of the news: In my database I have saved the image path, because I thought it would perform better than using an ImageField. My code looks like this: 

<body>
<h2>Notícias</h2>
<ul>
{% for noticia in Noticias %}
    <li>{{noticia.titulo}} - {{noticia.texto}} - {{noticia.imagem}}
    <img src="{{noticia.imagem}}" > </li>
{% endfor %}</ul>

Only the image does not appear when I try to run, is there something wrong in the code? Or is the image path incorrectly described?

Author: Gustavo Augusto Pires, 2020-05-12
Source

2 answers

This works If noticia.imagem has a correct URL and that works for your image. Where Are you gaveling the pictures? Is the app configured to serve static files from where they are? Just open the generated page in the browser, copy the " src " field from the image, paste in the browser, and see that it is not working-configure until it works and you're done.

It is only possible to answer so far, since you did not give details of where the images are in fact, and what is the content of the "image" field (if it is a correct URL).

Detail that only switch to ImageField, and put the image files themselves in the database will not do magic: you will need a view to respond to the URL of the images and deliver only the binary content of the image, and put the URL to that view in the src field of the <img ...> tags.

 0
Author: jsbueno, 2020-05-12 13:38:52

As stated above, to be able to load the image, its url needs to be correct which implies you have a static file server. The best way to do this would be to use a ImageField , and setting the MEDIA_URL and the MEDIA_ROOT to settings.py of the project and then include this url in urls.py from the project.

See how to serve static files in django here django-2.0-files

For a ImageField make the following settings and this works perfectly:

Adds the MEDIA_ROOT and MEDIA_URL to the settings.py 

# projeto/settings.py 
MEDIA_URL = '/media/' 
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# projeto/urls.py
from django.conf import settings
from django.conf.urls import url
from django.contrib import admin
from django.urls import path, include
from django.views.static import serve

urlpatterns = [
    path('admin/', admin.site.urls),
    # incluir noticias.urls
    path('noticias/', include('noticias.urls')),
    # caminho para servir arquivos
    url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
]


# noticiasapp/models.py
from django.db import models

class Noticia(models.Model):
    titulo = models.CharField(max_length=200)
    imagem = models.ImageField(upload_to="media/images/noticias")
    texto = models.TextField()

# noticiasapp/urls.py
urlpatterns = [
    path('', views.listar_noticias, name="listar_noticias")
]


# noticiasapp/views.py
from django.shortcuts import render
from .models import Noticia

def listar_noticias(request):
    context = {'noticias': Noticia.objects.all()}
    return render(request, 'noticias/listar_noticias.html', context)

newsapp / templates/newsapp / news_list.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Noticias</title>
</head>
<body>
<ul>
    {% if noticias.count > 0 %}
        {% for noticia in noticias %}
            <li>
                <h3>{{ noticia.titulo }}</h3>
                <p>{{ noticia.texto }}</p>
                <img src="{{ noticia.imagem.url }}">
            </li>
        {% endfor %}
    {% else %}
        <h3>Sem notícias ainda</h3>
    {% endif %}

</ul>

</body>
</html>
 0
Author: Marvin Correia, 2020-05-12 15:04:34