生成图像的<img>标记块。
项目描述
canonicalwebteam.image-template
一个生成高效HTML图像标记的模块。该标记将
- 如果可用，将使用原生懒加载
- 输出与lazysizes
noscript插件兼容的标记 - 显式定义
width和height属性以避免页面跳转效果 - 将所有图像URL前缀为cloudinary CDN代理URL，以将图像转换为最佳大小
- 使用预定义的（2x）
srcset断点为hidef屏幕
参数
url（必填字符串）：图像的URL（例如https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png）alt（必填字符串）：描述图像的Alt文本hi_def（必选布尔值）：是否已上传宽度为期望尺寸两倍、高度为期望尺寸的图片width（必选整数）：图片应该有多宽的像素数height（可选整数）：图片应该有多高的像素数fill（可选布尔值）：将裁剪模式设置为"fill"loading（可选字符串，默认："lazy"）：设置为"auto" 或 "eager"以禁用懒加载attrs（可选字典）：额外的<img>属性（例如class或id）可以作为额外的参数传递
使用方法
可以直接使用 image_template 函数来生成图片标记。
from canonicalwebteam import image_template
image_markup = image_template(
url="https://assets.ubuntu.com/v1/450d7c2f-openstack-hero.svg",
alt="",
width="534",
height="319",
hi_def=True,
loading="auto",
fill=True,
attrs={"class": "hero", "id": "openstack-hero"},
)
然而，最常用的方法是将其添加到 Django 或 Flask 模板上下文中，作为一个 image 函数。
添加 lazysizes
在撰写本文时，loading 属性仅在 Chrome 中原生支持。因此我们使用 lazysizes 来在其它浏览器中启用加载，同时仍然可以利用原生功能（如果可用）。
如果 loading 被设置为 "lazy"（默认值），我们将输出由 lazysizes 支持的格式的 标记，并启用 noscript 和 native-loading 插件。
为了支持这一点，您需要在每个页面的 <head> 中添加以下脚本，在任何 <link> 属性之上
<script src="https://assets.ubuntu.com/v1/703e23c9-lazysizes+noscript+native-loading.5.1.2.min.js" defer></script>
Django 使用方法
将其作为模板标签添加
# myapp/templatetags.py
from canonicalwebteam import image_template
from django import template
from django.utils.safestring import mark_safe
register = template.Library()
@register.simple_tag
def image(*args, **kwargs):
return mark_safe(image_template(*args, **kwargs))
# settings.py
TEMPLATES[0]["OPTIONS"]["builtins"].append("myapp.templatetags")
在模板中使用它
# templates/mytemplate.html
{% image url="https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png" alt="Operational dashboard" width="1040" height="585" hi_def=True fill=True %}
Flask 使用方法
将其作为模板标签添加
# app.py
from canonicalwebteam import image_template
from flask import Flask
app = Flask(__name__)
@app.context_processor
def utility_processor():
return {"image": image_template}
在模板中使用它，例如：
# templates/mytemplate.html
{{
image(
url="https://assets.ubuntu.com/v1/450d7c2f-openstack-hero.svg",
alt="",
width="534",
height="319",
hi_def=True,
fill=True,
loading="auto",
attrs={"class": "hero", "id": "openstack-hero"},
) | safe
}}
生成的标记
输出图像标记将是例如
<img
src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_534,h_319,c_fill/https://assets.ubuntu.com/v1/450d7c2f-openstack-hero.svg"
srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_1068,h_638,c_fill/https://assets.ubuntu.com/v1/450d7c2f-openstack-hero.svg 2x"
alt=""
width="534"
height="319"
loading="auto"
class="hero"
id="openstack hero"
/>
如果 loading 被设置为 "lazy"（默认值），输出标记将被包装在支持 lazysizes 的标记中
<div class="lazyload" data-noscript>
<noscript>
<img ...>
</noscript>
</div>
VS Code 代码片段
要将此模板所需的标记添加为用户代码片段，请将以下内容添加为 HTML 代码片段（在 File > Preferences 或 Code > Preferences 上 macOS）
"Image module": {
"prefix": "image-module",
"body": [
"{{",
" image_template(",
" url=\"$1\",",
" alt=\"$2\",",
" height=\"$3\",",
" width=\"$4\",",
" hi_def=$5True,",
" loading=\"auto|lazy$6\",",
" attrs={\"class\": \"$7\"}",
" ) | safe",
"}}"
],
"description": "Image module include"
}"
关闭
散列值 for canonicalwebteam.image_template-1.3.1-py3-none-any.whl
| 算法 | 散列摘要 | |
|---|---|---|
| SHA256 | d803d27a9767b97e8149c3992196ac16ed01181ddaafe4757ebfbd74d21fb7c4 |
|
| MD5 | 2ab0f706a937fbc069e4ffa324fda8f0 |
|
| BLAKE2b-256 | 6e07354176e3cbeb606f84b2e9360bcead22108c48a021e101040cfa1f543a29 |