目标：通过Django向HTML传送图片展示

我的天哪，真是膈应人，网上的案例都不适合我，感觉所有的解决办法在我这里都不行。

好吧~ 是我菜，看不懂人家的代码，那句话叫啥来着？一本好经被傻和尚念歪了。自己摸索一下午，快疯了。路径是对的，但是就是不能把图片显示出来，最后看到别人博客的一句话，终于出来了~~~ 满满辛酸泪！

进入正题——————假装这是一条分割线————————

 

上一篇博客说我已经成功将图片上传到Django后台并且成功存储到数据库，接下来就接上一个继续做，将存起来的图片展示到HTML前端上去！

 

接上一个python项目哈，继续敲······

上一个好像拉掉一个东西了，但是好像也不影响，为什么说不影响，因为我菜！加上吧，免得以后出问题。

在 setting.py 文件中找到 TEMPLATES 中加一句

 'django.template.context_processors.media',

总起来说效果是这样子滴

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'django.template.context_processors.media',
            ],
        },
    },
]

OK，补充完毕！尽管现在我还不知道有啥用。好，开始今天的项目。

 

在上一个项目代码中添加：

1.在 url.py 文件中添加一条路由，来进入展示界面。就像下面这个样子····

 

 path('show/', views.showimg, name='photos'),

 

2.在 views.py 文件中创建一个函数，对应我们上一步的路由。

def showimg(request):
    imgs = models.mypicture.objects.all() # 查询到数据库所有图片
    # 创建一个字典来存储这些图片信息
    content = {
        'imgs': imgs
    }
    # 打印一下这些图片信息
    for i in imgs:
        # 输出一下信息内容
        print(i.photo)
    # 最后返回一下我们的展示网页，动态图片数据展示放进去
    return render(request, 'bbb.html', content)

 

3.当然，我们也要去修改一下上传图片函数中的代码，让他在上传成功后可以跳转到展示界面

def updateinfo(request):
    if request.method == 'POST':
        # img = request.FILES.get('photo')
        # user = request.FILES.get('photo').name
        new_img = models.mypicture(
            photo=request.FILES.get('photo'),  # 拿到图片
            user=request.FILES.get('photo').name  # 拿到图片的名字
        )
        new_img.save()  # 保存图片
        # 修改的是下面这句代码，重定向到展示记得URL
        return redirect('/show/')

    return render(request, 'aaa.html')

 

4. 我们最后创建一个新的HTML文件，用来展示我们之前存进数据库的图片

名字还是随便取了

bbb.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% for img in imgs %}
    <img src="{{MEDIA_URL}}{{ img.photo }}"/>
{% endfor %}
</body>
</html>

我的问题就是出现在下面这句话

<img src="{{MEDIA_URL}}{{ img.photo }}"/>

我试过很多办法，路径格式都正确，就是显示不出图片，要不是白板要不是小×图片，气的要死，各种配置setting.py  url.py等都不行，在快要绝望的时候，突然看到一个大神的博客有这样一句话：

福利

当我们在模板（html文件）中引用图片时可以通过下面的方式来轻松获取图片路径：

<img src="{{MEDIA_URL}}/images/logo.png">

 

结果去试了一下，真他妈行！！！！

附带大神博客：https://blog.csdn.net/ly1414725328/article/details/47718295?locationNum=10

 

OK！展示图片也完成了~！~！记录一下，真的很辛苦！

 

上传的图片是这些：

简单的Django向HTML展示动态图片 案例——小白

 

数据库里面是这个样子滴：

简单的Django向HTML展示动态图片 案例——小白

 

效果图是这个样子滴：

简单的Django向HTML展示动态图片 案例——小白

 

网页源码：

简单的Django向HTML展示动态图片 案例——小白

 

 

 

 

下面是主要代码：

url.py

from django.contrib import admin
from django.urls import path
from app01 import views
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
                  path('admin/', admin.site.urls),
                  path('up/', views.updateinfo),
                  path('show/', views.showimg, name='photos'),
                  # path(r'^media/(?P.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT})
              ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

model.py

from django.db import models


# Create your models here.

class mypicture(models.Model):
    user = models.CharField(max_length=64)
    photo = models.ImageField(upload_to='photos', default='user1.jpg')

 

views.py

from django.shortcuts import render, HttpResponse, redirect
from app01 import models
import os
# Create your views here.

from django.core.files.base import ContentFile


def updateinfo(request):
    if request.method == 'POST':
        # img = request.FILES.get('photo')
        # user = request.FILES.get('photo').name
        new_img = models.mypicture(
            photo=request.FILES.get('photo'),  # 拿到图片
            user=request.FILES.get('photo').name  # 拿到图片的名字
        )
        new_img.save()  # 保存图片
        # 修改的是下面这句代码，重定向到展示记得URL
        return redirect('/show/')

    return render(request, 'aaa.html')


def showimg(request):
    imgs = models.mypicture.objects.all() # 查询导数据库所有图片
    # 创建一个字典来存储这些图片信息
    content = {
        'imgs': imgs
    }
    # 打印一下这些图片信息
    for i in imgs:
        # 输出一下信息内容
        print(i.photo)
    # 最后返回一下我们的展示网页，动态图片数据展示放进去
    return render(request, 'bbb.html', content)

 

好，结束！