• 简单的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)

    好,结束!

    【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处!
    【重要说明】本文为本菜鸟的学习记录,论点和观点仅代表个人不代表此技术的真理,目的是学习和可能成为向别人分享的经验,因此有错误会虚心接受改正,但不代表此时博文无误!
    【博客园地址】JayveeWong: http://www.cnblogs.com/wjw1014
    【CSDN地址】JayveeWong: https://blog.csdn.net/weixin_42776111
    【Gitee地址】Jayvee:https://gitee.com/wjw1014
    【GitHub地址】Jayvee:https://github.com/wjw1014
  • 相关阅读:
    php大文件上传(切片)控件
    php大文件上传(切片)组件
    Blog 实现ctrl+v粘贴图片并上传、word粘贴带图片
    博客 实现ctrl+v粘贴图片并上传、word粘贴带图片
    wordpress 实现ctrl+v粘贴图片并上传、word粘贴带图片
    CMS 实现ctrl+v粘贴图片并上传、word粘贴带图片
    SiteFactory 实现ctrl+v粘贴图片并上传、word粘贴带图片
    使用SAP CRM Application Enhancement Tool创建表格类型的扩展字段
    两种在SAP Cloud Application Studio里通过编程对C4C UI字段赋值的方法
    如何在SAP C4C AdvancedListPane上批量执行若干BO实例的action
  • 原文地址:https://www.cnblogs.com/wjw1014/p/8665699.html
Copyright © 2020-2023  润新知