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

目标：通过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！展示图片也完成了~！~！记录一下，真的很辛苦！

 

上传的图片是这些：

 

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

 

效果图是这个样子滴：

 

网页源码：

 

 

 

 

下面是主要代码：

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)
复制代码

 

好，结束！

posted @   叫我+V  阅读(2772)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示