django前端显示图片

参考：https://blog.csdn.net/J_wb49/article/details/103055817

一. 基本方法

1.前提条件

创建好项目后，在settings.py中默认创建好了图片需要的两个条件

• INSTALLED_APPS中默认添加了'django.contrib.staticfiles'
• settings.py默认添加了STATIC_URL = '/static/'

2.创建图片保存位置

在新建的app目录下新建一个static文件夹，在里面再新建一个image文件夹来保存图片，比如图片位置是blog/static/image/1.jpg

3.html中显示图片的方式

{% load static %}

#下面两种方式都可
<img  src="/static/image/data.png">
<img src="{% static 'image/data.png' %}">

注意：

如果app比较多，为了避免多个app下的图片名称相同，通常我们再staic目录下新建一个和app同名的文件夹，然后图片放在此目录下，比如blog/static/blog/1.jpg

4.目录结构参考

二. 创建公共static存放位置

1.添加STATICFILES_DIRS

如果有一些静态文件是不和任何app挂钩的。那么可以在settings.py中添加STATICFILES_DIRS，以后DTL就会在这个列表的路径中查找静态文件。比如可以设置为:

STATICFILES_DIRS = [
     os.path.join(BASE_DIR,"static")
 ]

其中static目录的位置和应用blog同级，BASE_DIR就是项目所在的根目录/ORMTEST

2.静态资源的加载顺序

公共static ->app下static

如果公共static（需要配置STATICFILES_DIRS）下不存在对应的文件，就按照settings.py中app注册的顺序查找。

3.html中显示图片

方式一样
{% load static %}
<img  src="/static/image/data.png">

4. html中不写

在settings.py中的TEMPLATES/OPTIONS添加'builtins':['django.templatetags.static']，这样以后在模版中就可以直接加载图片

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        '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',
            ],
            'builtins': ['django.templatetags.static']

        },
    },
]