如何在自定义区块中为图片添加alt属性

要给你的Shopify自定义区块图片添加并显示alt属性，只需完成以下两步修改：

1. 在Schema中添加Alt文本设置项 #

在settings数组里新增一个文本输入字段，让后台可以编辑图片的alt文本：

{% schema %}
{
  "name": "Img section",
  "settings": [
    {
      "id": "img_section_image",
      "type": "image_picker",
      "label": "添加图片"
    },
    {
      "id": "img_section_alt",
      "type": "text",
      "label": "图片替代文本（Alt Text）",
      "info": "用于提升可访问性和SEO，为空时将自动使用图片文件名作为默认值"
    }
  ],
  "presets": [
    {
      "name": "Img sections"
    }
  ]
}
{% endschema %}

2. 在Img标签中调用Alt属性值 #

修改<img>标签，添加alt属性，同时处理空值情况（自动用图片文件名生成默认alt文本）：

<img 
  src="{{ section.settings.img_section_image | img_url: '960x645'}}"
  alt="{{ section.settings.img_section_alt | default: section.settings.img_section_image.filename | replace: '.png', '' | replace: '.jpg', '' | replace: '.jpeg', '' | replace: '.gif', '' }}"
>

补充说明 #

• 后台编辑时，可直接在新增的文本框输入自定义alt文本
• 若未输入alt文本，会自动提取图片文件名并去除后缀作为默认值，确保alt属性不会为空
• 该方案同时满足网页可访问性要求与SEO优化需求

内容的提问来源于stack exchange，提问作者yanksi_