Shopify 前端开发 占位符(占位图片)的使用

Shopify 占位符的使用

本人兼职shopify 开发工作，如有需要可以加我微信 abc939039210，备注 shopify开发咨询

摘要

这编内容很简单，基本我们只需要知道怎么调用就行了

在 shopify 主题中我们 经常会看到 一些占位的图片，如下图，下面的图形分为两种，一种是图一由shopify 提供的占位符(SVG格式)，另一种是图二由placeholder提供的可自定义尺寸的图片(jpg格式)。个人比较推荐使用第二种方式，因为这样可以比较直观的知道要上传的图片格式

使用

Shopify 占位符 placeholder_svg_tag

示例

输入

{{ 'image' | placeholder_svg_tag }}

输出

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525.5 525.5"><path d="M324.5 212.7H203c-1.6 0-2.8 1.3-2.8 2.8V308c0 1.6 1.3 2.8 2.8 2.8h121.6c1.6 0 2.8-1.3 2.8-2.8v-92.5c0-1.6-1.3-2.8-2.9-2.8zm1.1 95.3c0 .6-.5 1.1-1.1 1.1H203c-.6 0-1.1-.5-1.1-1.1v-92.5c0-.6.5-1.1 1.1-1.1h121.6c.6 0 1.1.5 1.1 1.1V308z"></path><path d="M210.4 299.5H240v.1s.1 0 .2-.1h75.2v-76.2h-105v76.2zm1.8-7.2l20-20c1.6-1.6 3.8-2.5 6.1-2.5s4.5.9 6.1 2.5l1.5 1.5 16.8 16.8c-12.9 3.3-20.7 6.3-22.8 7.2h-27.7v-5.5zm101.5-10.1c-20.1 1.7-36.7 4.8-49.1 7.9l-16.9-16.9 26.3-26.3c1.6-1.6 3.8-2.5 6.1-2.5s4.5.9 6.1 2.5l27.5 27.5v7.8zm-68.9 15.5c9.7-3.5 33.9-10.9 68.9-13.8v13.8h-68.9zm68.9-72.7v46.8l-26.2-26.2c-1.9-1.9-4.5-3-7.3-3s-5.4 1.1-7.3 3l-26.3 26.3-.9-.9c-1.9-1.9-4.5-3-7.3-3s-5.4 1.1-7.3 3l-18.8 18.8V225h101.4z"></path><path d="M232.8 254c4.6 0 8.3-3.7 8.3-8.3s-3.7-8.3-8.3-8.3-8.3 3.7-8.3 8.3 3.7 8.3 8.3 8.3zm0-14.9c3.6 0 6.6 2.9 6.6 6.6s-2.9 6.6-6.6 6.6-6.6-2.9-6.6-6.6 3-6.6 6.6-6.6z"></path></svg>

效果图

API 文档

占位符名称（Placeholder name）	预览（Preview）
collection-1
collection-2
collection-3
collection-4
collection-5
collection-6
image
lifestyle-1
lifestyle-2
product-1
product-2
product-3
product-4
product-5
product-6

Placeholder 自定义尺寸图片

placeholder 的功能比较多，更多的使用方法可以看 placeholder 官方

示例

格式

<img src="https://via.placeholder.com/<宽>x<高>">

输入

<img src="https://i-blog.csdnimg.cn/blog_migrate/a38bc09e4aaebe9373a7f029e5491684.png">

效果图

追加

假如你不想要显示 powered by HTML.COM 你可以给图片链接最近文本信息，如：https://i-blog.csdnimg.cn/blog_migrate/a38bc09e4aaebe9373a7f029e5491684.png?text=400x300