为图像生成<img>标记块。
canonicalwebteam.image-template的Python项目详细描述
为图像生成可执行的HTML图像标记的模块。加价 将：
- 使用data-src属性 lazysizes
- 使用预定义的srcset断点
- 使用?w=XX&h=XX查询调整assets.ubuntu.com图像的大小 参数
- 为cdn和image的所有图像url加上cloudinary代理url前缀 转换
参数
- url（强制字符串）：图像的url（例如。 https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png）
- alt（强制字符串）：描述图像的alt文本
- width（强制整数）：图像宽度的像素数 应该是
- height（强制整数）：图像高的像素数 应该是
- hi_def（强制布尔值）：是否已上载图像，宽度和高度是所需大小的2倍
- extra_classes（可选）：要添加到img元素的类字符串
- 额外属性（可选）：额外<img>属性（例如 id）可以作为附加参数传递
用法
image_template函数可以直接用于生成图像 加价。
fromcanonicalwebteamimportimage_templateimage_markup=image_template(url="https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png",alt="Operational dashboard",width="1040",height="585",hi_def=True)
但是，最常见的用法是将其添加到django或烧瓶模板中 上下文，作为image函数。
添加懒散尺寸
生成的标记将使用 lazysizes格式-它将 使用data src而不是src并添加lazyload类。
因此，要使用这个插件，您需要在 页。实现这一点的最简单方法是在 <head>：
<scriptsrc="https://assets.ubuntu.com/v1/842d27d3-lazysizes.min.js"async=""></script>
django用法
将其添加为模板标记：
# myapp/templatetags.pyfromcanonicalwebteamimportimage_templatefromdjangoimporttemplatefromdjango.utils.safestringimportmark_saferegister=template.Library()@register.simple_tagdefimage(*args,**kwargs):returnmark_safe(image_template(*args,**kwargs))# settings.pyTEMPLATES[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 %}
烧瓶使用
将其添加为模板标记：
# app.pyfromcanonicalwebteamimportimage_templatefromflaskimportFlaskapp=Flask(__name__)@app.context_processordefutility_processor():return{"image":image_template}
在模板中使用：
# 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,
) | safe
}}
生成的标记
以上所有示例都将生成以下标记：
<imgdata-srcset="https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize,w_2080,h_1170/https%3A//assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png x2"data-src="https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize,w_1040,h_585/https%3A//assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png"alt="Operational dashboard"width="1040"height="585"class="lazyload"/><noscript><imgsrcset="https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize,w_2080,h_1170/https%3A//assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png x2"src="https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize,w_1040,h_585/https%3A//assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png"alt="Operational dashboard"width="1040"height="585"/></noscript>
文件大小
资料来源： https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png 2560 x 1440-300.62KB
资产服务器x2调整大小： https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png?w=2080&h=1170 2080 x 1170-595.67KB
资产服务器大小调整： https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png?w=1040&h=585 1040 x 585-221.21千字节
Asset Server Resize x2+Cloudinary x2调整大小： https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize/https%3A//assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png%3Fw%3D2080%26h%3D1170 2080 x 1170-194.97KB
资产服务器调整大小x1+Cloudinary x1调整大小： https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize/https%3A//assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png%3Fw%3D1040%26h%3D585 1040 x 585-109.38KB
cloudinary x2调整大小： https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize,w_2080,h_1170/https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png 2080 x 1170-163.38
Cloudinary x1调整大小： https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize,w_1040,h_585/https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png 1040 x 585-62.80千字节
欢迎加入QQ群-->： 979659372
