web-dev-qa-db-fra.com

Les images d'ImageField dans Django ne se chargent pas dans un modèle

Je construis une galerie en utilisant Django (1.5.1) sur ma machine locale. Dans mon modèle d'Album, j'ai une ImageField. Il y a une vue pour montrer toutes les images d'un album. Cela fonctionne bien, mais à la fin, les images ne s'affichent pas. Comme vous pouvez le voir, il y a une bordure d'images, mais les images ne se chargent pas. 

capture d'écran

enter image description here

models.py

class Category(models.Model):
 ###  
class Album(models.Model):   
    category = models.ForeignKey(Category, related_name='albums')
 ###
class Image(models.Model):
    album = models.ForeignKey(Album)
    image = models.ImageField(upload_to = 'images/albums/')

views.py

def detail(request, album_id):
    album = get_object_or_404(Album, pk=album_id)
    return render(request, 'gallery/detail.html', {'album': album})

detail.html

<h1>{{ album.title }}</h1>
{% for image in album.image_set.all %}
  <a>  <img src="{{ image.image.url }}" height="420"></a>
{% endfor %}

S'il s'agit de l'adresse de mon album: http://localhost:8000/gallery/1/ 

L'URL de l'image est alors: http://localhost:8000/media/images/albums/photo_4.JPG (I get 404 when enter it in browser) 

Cette racine de média et url: 

MEDIA_ROOT = '/media/'    
MEDIA_URL = '/localhost:8000/media/'  

Ma racine de média a la permission 777 .

Qu'est-ce que je devrais faire maintenant? Où est le problème?

14
sheshkovsky

J'ai un indice sur quel est le problème. MEDIA_URL devrait être comme ceci:

MEDIA_ROOT='<the full path to your media folder>' (i.e: '/home/ike/project/media/')
MEDIA_URL='/media/'

Notez la barre oblique au début. En effet, le support est un dossier du dossier de votre serveur racine et n’est pas relatif à l’URL que vous appelez.

Et ajoutez ces lignes à la fin de votre fichier urls.py:

# You might need to import static function like this:
#from Django.contrib.staticfiles.urls import static

urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Vous pouvez consulter la documentation suivante: https://docs.djangoproject.com/en/dev/howto/static-files

J'espère que cela t'aides

31
Paulo Bu

Si vous utilisez le serveur de dev, vous devez ajouter quelque chose à votre urls.py pour que Django serve les fichiers multimédias, cf:

1.4.x: https://docs.djangoproject.com/fr/1.4/howto/static-files/#serving-other-directories 1.5.x: https: //docs.djangoproject .com/fr/dev/howto/static-files/# servant-files-uploadés par l'utilisateur

5

Source: https://docs.djangoproject.com/en/dev/howto/static-files/#serving-files-uploaded-by-a-user

 from Django.conf import settings
from Django.conf.urls.static import static

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

vous devez ajouter au modèle d'URL pour servir les fichiers téléchargés

2
Saher Ahwal

Dans votre details.html , changez votre 

img src="{{ image.image.url }}" height="420"

À 

img src="your_app/media/{{ image.image.url }}" height="420"

J'espère que ça aide. Sinon, je serai heureux de fournir plus de détails.

1
Amimo Benja

Vérifiez dans votre settings.py vous avez défini MEDIA_ROOT et 'MEDIA_URL' (et ils sont corrects). MEDIA_ROOT spécifie un dossier absolu sur votre machine où le média sera stocké. 

Donc, pour un exemple:

MEDIA_ROOT = '/myfolder/'

Cela signifierait qu'il chercherait une image sur:

/myfolder/images/albums/

Suivant dans votre settings.py vérifiez votre emplacement MEDIA_ROOT: i.e.

MEDIA_URL = 'http://localhost/myfolder/'

Donc vos images:

<img src="{{ MEDIA_URL }}{{ image.image.url }}" height="420"></a>

Cela concernerait:

http://localhost/myfolder/images/albums/

J'espère que cela t'aides.

1
Glyn Jackson

J'ai pris un peu de chacune des réponses ci-dessus. J'avais le même problème que toi. Je recevais des retours provenant du/blog/post/(media_url)/image.jpg actuel 

Dans mon portail d'administration, je pouvais le voir facilement et l'éditer. Mais sur mon post.html, j'avais des problèmes jusqu'à ce que j'ajoute le {{MEDIA_URL}} - 

C'est tout ce qui me manquait.

J'ai posté toute ma section ci-dessous afin que d'autres personnes puissent la lire et voir ce qui leur manque. 

post.html:

    <label for="id_image">  <img src="{{ MEDIA_URL }}{{ p.image.url }}" 
    title="{{ p.title }}"> </label>

models.py:

    from Django.core.files.storage import FileSystemStorage

    upload_location =
    FileSystemStorage(location='/home/pi/djcode/xpcpro/xpcpro/images')

    class Blog(models.Model):
        title = models.CharField(max_length=255)
        author = models.ForeignKey(settings.AUTH_USER_MODEL, default=1)
        date = models.DateTimeField(auto_now=False, auto_now_add=True)
        body = models.TextField()
        image = models.ImageField(
            storage=upload_location, null=True,
            blank=True, width_field="width_field",
            height_field="height_field",)
        height_field = models.IntegerField(default=0)
        width_field = models.IntegerField(default=0)

urls.py:

    from Django.conf.urls.static import static
    from Django.contrib.staticfiles.urls import staticfiles_urlpatterns

    urlpatterns += staticfiles_urlpatterns()
    urlpatterns += static(settings.MEDIA_URL,
    document_root=settings.MEDIA_ROOT)

settings.py:

    MEDIA_ROOT = "/home/pi/djcode/xpcpro/xpcpro/images/"
    MEDIA_URL = "/images/"
0
jMrL

Eh bien, je sais que cette question est ancienne, mais je l’ai résolue maintenant après avoir prouvé toutes les options:

  1. settings.py:
 MEDIA_URL = '/media/'
 MEDIA_ROOT = os.path.join (BASE_DIR, 'media') 
  1. urls.py DANGER !!! Ici, l’une de mes erreurs a été d’utiliser my_app/urls.py ... Si vous souhaitez utiliser my_app/urls.py, vous devez ajouter "/ namespace_name {{image.image.url}}" à la commande img
 depuis Django.conf.urls.static import static 
 de Django.contrib.staticfiles.urls importer staticfiles_urlpatterns 
 depuis les paramètres d'importation Django.conf 

 urlpatterns + = staticfiles_urlpatterns () 
 urlpatterns + = static (settings.MEDIA_URL, document_root = settings.MEDIA_ROOT) 
  1. Votre modèle, detail.html
 img src = "{{image.image.url}}" alt = "{{image.title}}" 

REMARQUES: Vous n'avez pas besoin de MEDIA_URL, soyez prudent avec le '/' car image.image.url est absolu, donc si vous utilisez un espace de noms, vous n'avez pas besoin d'ajouter la barre oblique de fin.

 img src = "/ namespace_name/{{image.image.url}}" -> BAD !!! 
 img src = "/ namescape_name {{image.image.url}}" -> BON !!! 
0
Leaf