Django - 在后台上传文章封面图 - 并在前端页面展示

需要用到 models.ImageField()，它继承自 models.FileField(), 用ImageField的时候需要安装pillow

pip install pillow -i https://pypi.douban.com/simple/

首先，进行媒体文件配置：

settings中配置：

# 真正存储图片的文件夹
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
 
# 用于URL访问
MEDIA_URL = "/media/"

为了能够正确访问到资源，需要配置一下urls.py

from django.conf import settings
from django.conf.urls.static import static
 
urlpatterns = [
    ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

此时，就已经配置好了，可以进行测试了

现在，定义一个模型：

# 文章表
class Article(models.Model):
    # 文章标题title
    title = models.CharField(max_length=64, verbose_name='标题')
 
    # 文章内容content
    content = models.TextField(verbose_name='正文')
 
    # 【文章的封面图 article_picture】
    # upload_to字段表示，要将图片上传到哪个路径下，此处为img
    # 这个操作是在【MEDIA_ROOT = os.path.join(BASE_DIR, "media")】下进行的，也就是会在media下有一个img
    # 文件真正存放的位置是: media/img/xxx.png
    # 而article_picture字段中存的只是图片的路径
    article_picture = models.ImageField(upload_to='img/', verbose_name='封面图')

此时，我们在后台上传一张图片：

那怎么在前端展示这个封面图呢？
例如，现在我来展示一篇文章的信息，如下：

{% for article in articles %}
        <div>
            <img src="{{ article.article_picture }}" alt="">
            <br>
            <br>
            <p>{{ article.title }}</p>
            <p>{{ article.content }}</p>
        </div>
{% endfor %}

但是，这时候还是显示不了图片，原因是 “<img src="{{ article.article_picture }}" alt="">” 写错了，应该这么写：【article.article_picture.url】

{% for article in articles %}
        <div>
            <img src="{{ article.article_picture.url }}" alt="">
            <br>
            <br>
            <p>{{ article.title }}</p>
            <p>{{ article.content }}</p>
        </div>
{% endfor %}