Django1.11.2/Wagtail1.10.1下上传图片成功却无法显示问题

Let’s walk through the most likely reasons your uploaded image isn’t displaying properly, and how to fix them—this is a common gotcha with Wagtail and Apache setups:

1. Media File Configuration Mismatch #

Wagtail relies entirely on Django’s media file settings to serve uploaded images. First, double-check your settings.py to ensure these are correctly set:

# settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Media files (uploaded content like images)
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # Absolute path to your media folder
MEDIA_URL = '/media/'  # URL path to access media files

Next, your Apache config needs to map the /media/ URL to your actual MEDIA_ROOT directory. Add this to your virtual host file (usually in /etc/apache2/sites-available/your-site.conf):

Alias /media/ /path/to/your/project/media/
<Directory /path/to/your/project/media/>
    Require all granted
    Options Indexes FollowSymLinks
</Directory>

After updating the config, restart Apache to apply changes:

sudo service apache2 restart

2. Incorrect File/Directory Permissions #

Apache runs under a specific user (usually www-data on Debian/Ubuntu systems), and it needs read access to your media files and write access to the media directory. Fix permissions with these commands:

# Set ownership to Apache's user/group
sudo chown -R www-data:www-data /path/to/your/project/media/

# Set proper read/write permissions
sudo chmod -R 755 /path/to/your/project/media/

Without these permissions, Wagtail can upload the file but Apache can’t serve it, leading to the broken icon you’re seeing.

3. Test with a Simplified Filename #

While your current filename (Bildschirmfoto_2018_03_18_17_23_06.png) looks harmless, special characters or encoding edge cases can sometimes cause issues. Try uploading a test image with a simple name like test.png—if this works, you’ll know the original filename was the culprit.

4. Clear Wagtail’s Image Cache #

Wagtail automatically generates resized versions of images and stores them in cached subfolders under media/images/. If this cache gets corrupted, it can prevent images from displaying. Delete the cached folders (they’ll have random hash names) and re-upload your image to let Wagtail regenerate the thumbnails.

5. Verify File Storage Backend #

If you’ve customized Django’s DEFAULT_FILE_STORAGE setting, double-check that it’s configured correctly. The default FileSystemStorage should work fine for most setups—if you switched to a different backend (like cloud storage), ensure all credentials and paths are accurate.

Start with the first two steps (media config and permissions)—those are the most frequent causes of this exact issue. If none of these fix it, we can dig deeper!

内容的提问来源于stack exchange，提问作者egonFrerich