Gutenberg custom block - media upload (get alt image)答案

【问题标题】：Gutenberg custom block - media upload (get alt image)Gutenberg custom block - media upload (get alt image)
【发布时间】：2023-02-16 23:33:39
【问题描述】：

您好，我不知道如何通过古腾堡自定义块中的媒体上传获取替代图像。

edit.js:
function selectImage(value) {
    console.log(value);
    setAttributes({
        imgUrl: value.sizes.full.url,
    })
}

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

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

谢谢你的帮助我:)

【问题讨论】：

标签： reactjs wordpress wordpress-gutenberg gutenberg-blocks

【解决方案1】：

例如，我通常这样做以获得title：

edit: ({attributes, setAttributes}) => {
        const {
            title,
            media
        } = attributes;

        return (<>{title}</>)
}

setAttributes 用于用新值“设置”它们。

例如：

setAttributes({title: 'my new title'})

见：https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/

【讨论】：

【解决方案2】：

替代图片的解决方案：

编辑.js

        <InspectorControls>
        <PanelBody icon={image} title="Alt do HeroImage" initialOpen={false}>
            <TextControl
                label="hero image alt:"
                value={attributes.imgAlt}
                onChange={ ( val ) => setAttributes( { imgAlt: val } ) }
            />
        </PanelBody>
        </InspectorControls>

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

保存.js

export default function save( { attributes } ) {
const blockProps = useBlockProps.save();
return (
  <img className='classhere' src={attributes.imgUrl} alt={attributes.imgAlt}/>
);
}

块.json

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

【讨论】：

【解决方案3】：

您会在attributes 变量中找到它。在控制台中记录 attributes 变量，您将看到其中还有哪些其他值。

【讨论】：

如果他不从某个地方“获取”属性变量，那么在执行此操作时它不会简单地显示出来。
我以前也曾在某处读过。你有时间提供一个例子吗？

【解决方案4】：

@Vijay Hardaha 是正确的，因为使用较新版本的 Gutenberg，MediaUpload returns an image as an object 包含很多信息，包括 alt、id 和 url。在我的脚本中，注意返回之前的 console.log。选择图像后，它将向您显示对象的详细信息。

在这个例子中，我使用的是placeholder similar to this post，我正在提取图像 src 和 alt based on this post。

笔记：第二篇文章还解释了如何使用“hasImages”常量将 MediaPlaceholder 替换为选定的图像。原来是一个画廊，所以它返回一个对象数组。我只想要一张图片，所以我更改了它。

在 edit.js 内部

export default function Edit({ attributes, setAttributes }) {
    const hasImages = attributes.images.id !== undefined;
    console.log(attributes.images);
    return (
        <div {...useBlockProps()}>
            {hasImages && (
                <MediaUpload
                    allowedTypes={['image']}
                    multiple={false}
                    value={attributes.images ? attributes.images.id : ''}
                    onSelect={(newImages) => setAttributes({ images: newImages })}
                    render={({ open }) => (
                        <div className="image">
                            <figure>
                                <img src={attributes.images.url} alt={attributes.images.alt} />
                            </figure>
                            <div>
                                <Button onClick={() => setAttributes({ images: '' })} className="button">Remove</Button>
                            </div>
                        </div>
                    )}
                />
            )}
            {!hasImages && (
                <MediaPlaceholder
                    icon={<BlockIcon icon="format-gallery" />}
                    labels={{
                        title: "Placeholder Title",
                        instructions: "Add a most excellent image.",
                    }}
                    onSelect={(newImages) => setAttributes({ images: newImages })}
                />
            )}
        </div>
    );
}

block.json 内部，我的图像属性是“对象”类型：

"attributes": {
    "images": {
        "type": "object"
    }
}

我希望这有帮助！

【讨论】：