Django 前端访问media里的图片

经过本人反复入坑、爬出来，终于总结出Django前端访问media里的图片。这里假设在Django工程的settings.py已经配置好static和media，而且不讨论如何上传图片。

方法一：用图片url实现访问图片，后端向前端传media下图片的路径，即url

1、首先说明访问static下的图片和media下的图片不一样，尝试以下步骤

在static和media下放一张图片，然后在浏览器输入图片的url，看看页面是否能加载出图片，注意浏览器里的图片url，如果在浏览器直接输入url都不能访问到图片，那么在HTML里用img的src也不行。

image.png
err.JPG

2、为了能用url访问到media的图片，务必在工程文件urls.py中添加以下代码，关键是最后那一行

from django.views.static import serve
from . import settings
urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^media/(?P<path>.*)', serve, {"document_root":settings.MEDIA_ROOT}),
]

再次在浏览器输入media下的图片路径，就看到图片

image.png

3、重点来了，这里用ImageField存图，而ImageField.url表示图片的路径，可以直接使用。看本人代码如下

class User(models.Model):
    #...其他字段
    figure = models.ImageField(upload_to='user_figures', null=True, default="/static/img/default_profile.jpg") #头像

在model中定义ImageField，注意upload_to='user_figures'，图片会保存在工程路径/media/user_figures/下，那么figure.url = '/media/user_figures/id18_figure_hfw5WrD.jpg'，如果要访问到图片，在前端的img需要设置url为src="/media/user_figures/id18_figure_hfw5WrD.jpg"，注意路径最前面的'/'。所以在后端view.py里，直接将figure.url路径传到前端的img

respond_data = {}
user_data['user_figure'] = user.figure.url

方法二：用模板里的变量传参访问media图片，这是比较简单粗暴的方法，直接上代码

1、后端view.py

def setting(request):
    respond_data = {}
    user_id = request.session.get('user_id', None)
    user = User.objects.get(pk=user_id)
    respond_data['user_figure'] = user.figure
    return render(request, 'setting.html', respond_data)

2、作为前端的模板里面

<img id="imgPreview" src="{{ user_figure }}" class="img-circle">