树莓派（十一）——用Django在浏览器上显示本地图片

使用django实现网页的时候，想要在网页上显示图片是一件比较麻烦的事情。标准的html语言显示图片的方法在这里行不通，需要在配置文件中稍作修改。
之前我们已经建立了一个可以运行的网站了， 具体的目录如下：

djangosite/
├── app
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── __init__.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── __init__.py
│   ├── models.py
│   ├── templates
│   │   ├── moments_input.html
│   │   └── moments_input.html.old2
│   ├── tests.py
│   ├── urls.py
│   ├── views.py
├── db.sqlite3
├── djangosite
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
├── manage.py
└── static                         //新增目录
    └── myface.jpg             //本地图片

从上述结构可以看出，这个项目的名字就叫做“djangosite”，而APP的名字就叫做“app”。
在之前的基础上，我们新增了一个目录 static ，在新增的目录里面放入了我们想要在网页上展示的图片。

---

现在我们要通过配置Django文件，让本地图片能在浏览器上显示，并且结合我们自己的应用，在点击网页上的相应按钮的时候，可以跳转到相应的图片。

具体步骤如下

一、建立可以访问图片的链接

1、先在djangosite/djangosite/setting.py 配置文件中添加如下内容：

STATIC_URL = '/static/'
STATICFILES_DIRS = (
            os.path.join(BASE_DIR, 'static').replace('\\', '/'),
            )

2、然后在djangosite/app/urls.py中添加如下解析：

from django.views.static import serve     //新增导入 Django2.0新特性、新用法

urlpatterns = [
        url(r'^static/(?P.*)', serve, {'document_root':'/home/pi/djangosite/static'}),     //新增解析
	url(r'moments_input', views.moments_input),
	url(r'', views.welcome),
]

新增的解析中，前面是url的正则表达式，中间是从Django导入的 serve ，关键的’document_root’,是存放图片的文件夹绝对路径

3、重启Django服务，验证是否成功

启动django服务: python manage.py runserver 0.0.0.0:8001
所以访问图片的时候:输入：http://192.168.137.179:8001/static/myface.jpg
就访问到了虚拟机上该路径：/home/pi/djangosite/static/ 目录下的 myface.jpg 图片

---

二、设置url重定向指向图片

1、在djangosite/app/views.py 中添加重定向url

from django.http import HttpResponseRedirect        //导入支持URL重定向的模块

...      //根据自己的功能设置相应的代码块
return HttpResponseRedirect('http://192.168.137.179:8001/static/myface.jpg')     //定义 满足该模块的情况的时候 就将网页重定向到可以访问图片的链接，实现url重定向指向图片
...

2、测试

• 首先启动django服务: python manage.py runserver 0.0.0.0:8001
• 在浏览器上输入正常的网页地址：http://192.168.137.179:8001/app/moments_input
• 点击绑定过相应的触发事件的按钮或者链接，查看是否成功。此时应该会跳转到之前显示图片的链接，说明重定向成功
• 可以在终端上面看到django的重定向提示，如下所示：
  

能在网页上看到有图片跳出来、有django的重定向提示，说明成功~

（本人也是参考了很多坑爹的博文，多次试验成功之后才整理出来的，可能有一些步骤要点忘记了，，，如果大家在参考的过程中有些疑惑，可以在下面评论留言告诉我，或者直接QQ联系我）

参考博文：https://blog.csdn.net/lvluobo/article/details/80945257
https://www.cnblogs.com/zhawj159753/p/3938134.html