Django中为html页面插入背景图片的问题

最新推荐文章于 2025-01-22 14:58:11 发布

伯纳乌的斯坦森

最新推荐文章于 2025-01-22 14:58:11 发布

阅读量1w

点赞数 16

CC 4.0 BY-SA版权

文章标签： Django html标签 python

本文链接：https://blog.youkuaiyun.com/weixin_44467002/article/details/97370770

本文解决Django项目中图片无法插入页面的问题，通过正确配置静态文件路径，在html页面中使用相对路径加载图片，确保静态文件被正确引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习django架构，遇到了图片无法插入页面的问题，后来查阅了官方文档得知我们需要把图片放入一个静态文件static中，这个文件我们可以手动创建,与templates在同级目录下（app目录下）：
在这里插入图片描述
然后，我们需要在settings.py中配置一下静态路径：

STATIC_URL='/static'
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'static')
]

至此我们就可以往html页面中添加静态文件夹下的文件了：

<body style="background-image: url({% static 'blog/images/edit.jpg' %});
        background-size:100% 200%;background-repeat:no-repeat;">

需要注意一下url的格式，使用的是相对路径，no-repeat表示图片不重复。
哦，还有一个细节忘了提，我们需要在html文档的开始位置加上
{% load static %} 来加载静态文件，不让浏览器会报错。

以上。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

伯纳乌的斯坦森

关注关注

16
点赞
踩
41

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

django的html无法加载图片的问题

编程知识分享，主打前端

06-18

3万+

html的代码都是对的，但是django网页加载不出图片，wtf? 这里来给大家演示一下，应为setting.py少了东西，无法查找图片路径 STATICFILES_DIRS=( os.path.join(BASE_DIR,'static'), ) 补上这个代码 html插入图片很简单，我这里就举个栗子 {% load static %} <body background="...

Django学习路线之Django自带模板语言DTL

zbp_12138的博客

05-15

971

在前两篇文章中，视图函数只是直接返回文本，而在实际生产环境中其实很少这样用，因为实际的页面大多是带有样式的HTML代码，这可以让浏览器渲染出非常漂亮的页面 Django中,可以把模板理解成一种便捷地动态生成HTML的方法,下面我们一起来学习一下: 模板初体验模板变量模板标签模板过滤器模板结构优化加载静态文件 1. 模板初体验回忆一下第一篇文章里讲到的MVT思想: Django学习路线之从虚拟环境开始Django初体验这个T指的就是模板,模板的作用是返回一个HTML界面,再由视图返回给浏览器

2 条评论您还未登录，请先登录后发表或查看评论

Django之在富文本编辑其中添加图片

shengweisong

04-12

4393

如何添加富文本编辑器参考点击打开链接在上文中的config.js为： KindEditor.ready(function(K) { K.create('textarea[name=detail]',{ width:800, height:200, uploadJson: '/admin/uploa

Django添加背景图片

spiderfu的博客

07-15

3648

Django添加背景图片 style="background-image: url(../static/images/jpg.jpg)" 注意参数，backgroud弃用了，输入back会提示的路径没有引号，注意 ./是上级目录 …/是上上级目录找到你的图片位置，找对了，系统会提示。背景虚化在网上查到的背景虚化都是背景和文字都虚化了，如果大家有方法欢迎评论。我是先把图片用ps虚化再插入到网页背景，如果没有办法可以参考一下 ...

python之django的html插入背景图片

Caiabcd的博客

03-23

4633

使用django框架对html引入背景图片时，图片无法显示，是因为django框架需要对图片设置为静态第一步：在django的setting文件中设置如下图（此路径设置的static是和django同一等级）第二步：在需要插入html的文件中的head中写入一下代码 {% load static %} 第三步：引用对应路径的图片 url({% static 'img/1.jpg' %}) //代表的是静态文件夹(static)下的img文件夹中的1.jpg文件 ...

django html 插入网页背景图片

jidushanzhu的博客

11-20

5776

1、setting中设置静态文件夹 STATIC_URL = '/static/' STATICFILES_DIRS=[os.path.join(BASE_DIR,'login_register/static')] 2、html网页load文件夹，并设置body格式 <head> <meta charset="UTF-8"> {% load static %} <style type="text/css"> body{ backgroun

Django 添加背景图片

热门推荐

qq_36453146的博客

09-28

1万+

Django 添加背景图片

django admin 添加自定义链接方式

09-17

为了快速定位并处理问题，我们需要在Django Admin中实现一个功能，即点击这个ID就能直接跳转到对应内容的详情页面。解决这个问题的方法是通过自定义Django Admin的Widget、模板过滤器以及模型表单。以下是具体步骤...

Django性能优化：提升加载速度

05-20

1214

性能优化是Web开发中的关键环节，它直接影响到网站的用户体验。良好的性能意味着更快的页面加载速度，更低的延迟，更高的用户满意度。在竞争激烈的市场环境下，快速加载的网站能够吸引和留住用户，提升搜索引擎排名，降低跳出率，从而提高网站的转化率和商业价值。Django作为强大的Web开发框架，优化其性能有助于提升整个项目的可持续性和竞争力。在进行性能优化之前，首先需要了解其重要性。

python框架之Django使用

优快云_LiMingfly的博客

01-22

877

稍具规模的软件系统都会使用MVC架构（或者是从MVC演进出的其他架构），Django项目中我们称之为MTV，MTV中的M跟MVC中的M没有区别，就是代表数据的模型，T代表了网页模板（显示数据的视图），而V代表了视图函数，在Django框架中，视图函数和Django框架本身一起扮演了MVC中C的角色。Web开发的早期阶段，开发者需要手动编写每个页面，例如一个新闻门户网站，每天都要修改它的HTML页面，随着网站规模和体量的增大，这种做法一定是非常糟糕的。Python的Web框架有上百个，比它的关键字还要多。

进行django中的图片插入

weixin_44202888的博客

05-21

2326

导入需要进行的模块 from django.shortcuts import render,redirect from . import models import os from movie.settings import STATICFILES_DIRS 进行路径配置 def index(request): if request.method ==‘POST’: name = request....

django之设置背景图片 CSS 拉伸平铺

xxx_gt的博客

03-28

9858

django2.0 背景图片存在static文件夹中1、设置setting.py文件夹。STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]2、在html文件中，加载static文件夹，加入第一行就好了。{% load staticfiles %} <!DOCTYPE ht...

Django 前端插入图片

垂钓者-change

05-20

5597

文件路径放在blog app文件夹下面的/blog/static/test.png html代码 <img src="/static/test.png" width="60" height="105" /> 修改设置文件 setting.py 加入如下代码： # 设置图片等静态文件的路径（电脑系统文件夹路径） STATICFILES_DIRS = ( "/home/wen...

Django设置html背景图片失败，出现“GET /images/2.png HTTP/1.1“ 404 2552 解决方法

Deng872347348的博客

09-21

1554

Django设置html背景图片失败，出现“GET /images/2.png HTTP/1.1“ 404 2552 解决方法

Python-Django如何插入一个章图片

henusyb的博客

06-09

1419

首先我们先建立一个static的目录（与manage.py同一级别）如图然后就就是要把配置文件里加目录在settings.py里添加下面俩行STATIC_URL = '/static/' STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]然后就可以直接使用了我是小白，被坑好多次，网上的东西各种各样，还好遇到一个学长一指点就好希望能帮包你们...

三步解决：django-文件上传之Media url并可在后台管理添加图片

wangfan741的博客

11-03

766

问题：当开启一个项目的时候，通常会遇到文件（图片，音频等）上传的需要，最常见的比如图片的上传，用户头像，后台管理添加图片，而图片的在是数据库中的存储主要是以该文件的相对路径，在django中可以使用media_url很好的管理上传文件。解决办法：三步搞定： 1.在setting配置文件中配置路径 #项目中存储上传文件的根目录[暂时配置]，注意，uploads目录需要手动创建否则上传文件时报错 MEDIA_ROOT=os.path.join(BASE_DIR,"uploads") #访问上传文件的url

Django之--模板加载图片

weixin_30642305的博客

05-24

688

在使用Django加载图片时遇到了一些问题，在模板html文件中无论使用绝对路径还是当前相对路径都无法找到图片，一直报403和404的错误，后来结合官网和网上的其他资料总算是成功了，这里记下来。参考网址： https://docs.djangoproject.com/en/2.0/howto/static-files/ Django将图片，JS，CSS等文件称作静态文件，如果你要在模板中引...

快速入门Django （网页加载图片）

qq1376725255的专栏

04-11

777

网上找了很多加载图片的方法，有bug，终于最后调试成功啦首先创建一个和templates同级的文件夹static，并static下创建images文件夹，并在images文件夹中存放照片，如bk.jpg 如下： ├─static │ │ bk.jpg │ │ │ ├─css │ │ bk.jpg │ │ style.css │ │ │ └─images │...

Django设置html背景图片失败，出现“GET /images/2.png HTTP/1.1“ 404 2552

Ben_zhangxw的博客

11-27

3962

1、templates同级目录下创建文件夹static/images，将背景图放入images文件夹 2、打开settings.py 3、设置settings静态路径在settings文件最下面添加以下代码： STATIC_URL = '/static/' STATICFILES_DIRS=[ os.path.join(BASE_DIR,'static') ] 4、在html文档的开始位置加上 {% load static %} 来加载静态文件，不然浏览器会报错 5、此时，我们就可以在标签

django添加背景图片

最新发布

06-23

### 在 Django 中设置背景图片的方法在 Django 项目中设置背景图片，可以通过 HTML 和 CSS 实现。以下方法结合了静态文件的加载与样式定义，确保背景图片能够正确显示。 #### 方法一：直接在 HTML 文件中设置背景图片 可以在 `<body>` 标签中通过 `style` 属性直接指定背景图片路径，并调整其大小和布局[^1]。例如： ```html <body style="background-image: url({% static 'b1.jpg' %}); background-size: cover; background-repeat: no-repeat;"> ``` - `background-image`: 指定背景图片的路径。 - `background-size: cover`: 让背景图片按比例缩放以覆盖整个容器。 - `background-repeat: no-repeat`: 防止图片平铺。 #### 方法二：通过外部 CSS 文件设置背景图片 将背景图片的样式定义在外部 CSS 文件中，然后在 HTML 文件中引用该样式[^3]。例如： **CSS 文件 (styles.css):** ```css body { background-image: url('/static/images/timg.gif'); background-size: cover; background-repeat: no-repeat; } ``` **HTML 文件:** ```html <head> <meta charset="UTF-8"> {% load static %} <link rel="stylesheet" href="{% static 'css/styles.css' %}"> </head> ``` 此方法更符合分离结构与样式的最佳实践，便于维护和修改。 #### 方法三：使用 Django 的模型管理图片资源如果需要动态管理背景图片，可以借助 Django 的模型来存储图片文件[^2]。例如： **模型定义:** ```python from django.db import models class BackgroundImage(models.Model): name = models.CharField(max_length=50, unique=True) picture = models.ImageField(upload_to='backgrounds/') description = models.CharField(max_length=500) def __str__(self): return self.name ``` **视图函数:** ```python from django.shortcuts import render from .models import BackgroundImage def home(request): background = BackgroundImage.objects.first() # 获取第一张背景图片 context = {'background': background} return render(request, 'home.html', context) ``` **模板文件 (home.html):** ```html <body style="background-image: url('{{ background.picture.url }}'); background-size: cover; background-repeat: no-repeat;"> ``` #### 配置静态文件路径为了确保静态文件能够被正确加载，需要在项目的 `settings.py` 中配置静态文件路径[^4]。例如： ```python STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static').replace('\\', '/'), ] ``` 此外，还需要确保在开发环境中启用了静态文件服务。可以通过以下方式加载静态文件： ```html {% load static %} ``` ### 注意事项 - 确保图片路径正确无误，且图片文件已上传至静态文件夹或媒体文件夹。 - 如果使用的是生产环境，请配置 Web 服务器（如 Nginx）来提供静态文件服务。