如何在Gutenberg自定义区块中获取媒体上传图片的alt属性

步骤1：添加Alt属性到区块定义 #

首先需要在你的区块属性配置（通常在block.json或注册区块的attributes字段中）添加imgAlt，用来存储图片的alt文本：

"attributes": {
  "imgUrl": {
    "type": "string",
    "default": ""
  },
  "imgAlt": {
    "type": "string",
    "default": ""
  }
}

步骤2：修改edit.js中的图片选择逻辑 #

在selectImage函数里，除了保存图片URL，同时提取并保存图片的alt属性：

function selectImage(value) {
    console.log(value);
    setAttributes({
        imgUrl: value.sizes.full.url,
        imgAlt: value.alt || '' // 获取图片自带的alt文本，为空则设空字符串
    })
}

另外建议给编辑界面的预览图片也加上alt属性，提升可访问性：

<MediaUploadCheck>
    <MediaUpload
        onSelect={selectImage}
        allowedTypes={ ALLOWED_MEDIA_TYPES }
        value={ 1 }
        render={ ({open}) => {
            return <img 
                src={attributes.imgUrl}
                onClick={open}
                alt={attributes.imgAlt || ''}
                />;
        }}
    />
</MediaUploadCheck>

步骤3：修改save.js输出Alt属性 #

最后在保存模板里，把img标签的alt属性替换为存储的imgAlt值：

<div className='flex columns-xl justify-center items-center content-center'>
   <img className='max-w-sm' src={attributes.imgUrl} alt={attributes.imgAlt || ''}/>
</div>

原理说明：MediaUpload组件的onSelect回调返回的value对象包含图片的完整元数据，其中alt字段就是图片的替代文本，直接提取保存到区块属性即可。

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