Django抓取网络图片并在页面上显示

一 编辑mysite/mysite/settings.py

# 设置URL的路径
MEDIA_URL = '/media/'
# 相对项目根目录的文件保存地址
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

二 编辑mysite/mysite/urls.py

from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^blog/', include("blog.urls", namespace="blog", app_name="blog")),
    url(r'^account/', include("account.urls", namespace='account', app_name='account')),
    url(r'^pwd_reset/', include("password_reset.urls", namespace='pwd_reset', app_name='pwd_reset')),
    url(r'^article/', include('article.urls', namespace='article', app_name='article')),
    url(r'^home/', TemplateView.as_view(template_name="home.html"), name="home"),
    # 图片的根URL
    url(r'^image/', include('image.urls', namespace='image', app_name='image')),
]

# 为每个上传的静态图片配置了URL地址
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

三 编辑模板文件mysite/templates/image/list_images.html

{% extends "article/base.html" %}
{% load staticfiles %}

{% block title %}images{% endblock %}

{% block content %}
<div>
    <button type="button" class="btn btn-primary btn-lg btn-block" onclick="addImage()">添加图片</button>
    <div style="margin-top:10px;">
    <table class="table table-hover">
        <tr>
            <td>序号</td>
            <td>标题</td>
            <td>图片</td>
            <td>操作</td>
        </tr>
        {% for image in images %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ image.title }}</td>
            <!--<td>{{ image.image }}</td>-->
            <!--图片的URL地址-->
            <td><img src="{{ image.image.url }}" width="100px" height="100px"></td>

            <td><a nane="delete" href="javascript:" onclick="del_image(this, {{ image.id }})"><span class="glyphicon glyphicon-trash" style="margin-left:20px;"></span></a></td>
        </tr>
        {% empty %}
<p>还没有图片，请点击上面的按钮添加图片</p>
        {% endfor %}
    </table>
    </div>
</div>

<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/layer.js' %}"></script>
<script type="text/javascript">
    function addImage(){
        var index=layer.open({
          type: 1,
          skin: 'layui-layer-demo',
          closeBtn: 0,
          shift: 2,
          shadeClose: true,
          title: "Add Image",
          area: ['600px', '440px'],
          content: "<div style='padding:20px'><p>请新增扩展名是.jpg或.png的网上照片地址</p><form><div class='form-group'><label for='phototitle' class='col-sm-2 control-label'>标题</label><div class='col-sm-10'><input id='phototitle' type='text' class='form-control' style='margin-bottom:5px'></div></div><div class='form-group'><label for='photourl' class='col-sm-2 control-label'>地址</label><div class='col-sm-10'><input id='photourl' style='margin-bottom:5px' type='text' class='form-control'></div></div><div class='form-group'><label for='description' class='col-sm-2 control-label'>描述</label><div class='col-sm-10'><textarea class='form-control' style='margin-bottom:5px' row='2' id='photodescription'></textarea></div></div><div class='form-group'><div class='col-sm-offset-2 col-sm-10'><input id='newphoto' type='button' class='btn btn-default' value='Add It'></div></div></form></div>",
          success: function(){
            $("#newphoto").on('click', function(){
              var title = $("#phototitle").val();
              var url = $("#photourl").val();
              var description = $("#photodescription").val();
              var photo = {"title":title, "url":url, "description":description};
              $.ajax({
                url: '{% url "image:upload_image" %}',
                type: "POST",
                data: photo,
                success: function(e){
                  var status = e['status']
                  if(status =="1"){
                    layer.close(index);
                    window.location.reload();
                  } else {
                    layer.msg("图片无法获取，请更换图片");
                  }
                },
              });
            });
          },
        });
    }
function del_image(the, image_id){
  var image_title = $(the).parents("tr").children("td").eq(1).text();
  layer.open({
    type: 1,
    skin: "layui-layer-rim",
    area: ["400px", "200px"],
    title: "删除图片",
    content: '<div class="text-center" style="margin-top:20px"><p>是否确定删除《'+image_title+'》</p></div>',
    btn:['确定', '取消'],
    yes: function(){
      $.ajax({
        url: '{% url "image:del_image" %}',
        type:"POST",
        data: {"image_id":image_id},
        success: function(e){
          var status = e['status']
          if(status=="1"){
            parent.location.reload();
            layer.msg("has been deleted.");
          }else{
            layer.msg("删除失败");
          }

        },
      })
    },
  });
}
</script>


{% endblock %}

四 测试