如何解决WordPress Gutenberg 自定义图像块无法识别 src
这是我第一个使用 <img> 标签的 Wordpreess Gutenberg 块。我似乎无法显示图像。文本呈现，但似乎图像 src 不起作用。当我打开 DOM 并检查元素时，<Media Upload> 标记位于 DOM 树中，但没有 src，它只是空的。我试过将 <Panel Body> 放在内联和 <img src> 中，但无论如何 <Media Upload> 都没有采用。我确定我忽略了一些东西，但经过多次反复试验，我似乎无法将 const { registerBlockType } = wp.blocks;
const {
RichText,InspectorControls,ColorPalette,MediaUpload,MediaUploadCheck,Button,RawHTML,InnerBlocks
} = wp.editor;
const { PanelBody,IconButton } = wp.components;
const ALLOWED_BLOCKS = ['core/button','core/html','core/image']
registerBlockType('mycustomblock/feature-block',{
//Built-in Attributes
title: 'Feature Block',description: 'Block Description',icon: 'align-pull-left',category: 'design',//Custom Attributes
attributes: {
title: {
type: 'string',source: 'html',selector: 'p'
},titleColor: {
type: 'string',default: 'black'
},bodyColor: {
type: 'string',image: {
type: 'object',source:'html',selector:'feature-icon'
},body: {
type: 'string',selector: 'p'
}
},//Built-in Functions
edit({attributes,setAttributes}) {
const{
title,body,titleColor,bodyColor,image,} = attributes;
//Custom Functions
function onChangeTitle(newTitle) {
setAttributes( { title: newTitle } );
}
function onChangeBody(newBody) {
setAttributes( { body: newBody } );
}
function onTitleColorChange(newColor){
setAttributes( { titleColor: newColor } );
}
function onBodyColorChange(newBodyColor){
setAttributes( { bodyColor: newBodyColor } );
}
function onSelectimage(newImage) {
setAttributes( { image: newImage.sizes.full.url } )
}
return ([
<InspectorControls style={ { marginBottom: '40px' } }>
{/* <PanelBody title={ 'Image Settings' }>
</PanelBody> */}
<PanelBody title={ 'Headline Color' }>
<p><strong>Choose Title Color</strong></p>
<ColorPalette
value={titleColor}
onChange={onTitleColorChange}
/>
</PanelBody>
<PanelBody title={ 'Description Color' }>
<p><strong>Choose Description Color</strong></p>
<ColorPalette
value={bodyColor}
onChange={onBodyColorChange}
/>
</PanelBody>
</InspectorControls>,<div class="row">
<div class="col-md-4">
<div class="feature-icon-container">
<MediaUpload
onSelect={onSelectimage}
type="image"
value={image}
render={ ( { open } ) =>
<IconButton
onClick={ open }
icon="upload"
className="editor-media-placeholder__button is-button is-default is-default"
>
Select Image
</IconButton>
}
/>
</div>
<div class="feature-description-container">
<RichText
key="editable"
tagName="p"
placeholder="Feature Title"
value= { title }
onChange= { onChangeTitle }
style= { { color: titleColor } }
/>
<RichText
key="editable"
tagName="p"
placeholder="Description"
value= { body }
onChange= { onChangeBody }
/>
</div>
</div>
</div>
]);
},save({ attributes }) {
const {
title,} = attributes;
return(
<div class="row">
<div class="col-md-4">
<div class="feature-image-container">
<img class="feature-icon" src={ { image } } />
</div>
<div class="feature-description-container">
<RichText.Content style={ {color:titleColor } } tagName="p" value={title} />
<RichText.Content style={ {color:bodyColor } } tagName="p" value={body} />
</div>
</div>
</div>
)
}
});
正确连接到图像源。
msal-node解决方法
有几件事我们需要更正，我会为您指出正确的方向：
- 对如何“获取”
image属性的小误解。您正在从src组件获取图像的MediaUpload并通过image函数设置onSelectImage属性（这是一个 URL 字符串）。按照您现在声明的方式，您尝试从 html 选择器的 innerHTML 中获取它。 因此，在您的属性声明中使用以下语法就足够了：
image: {
type: 'string',default: '',}
如果需要，您可以插入默认/占位符图像的 src url，而不是空字符串。
让您知道：从 html 选择器中获取资源只有在该选择器的 innerHTML 可在块的内容中进行编辑时才有意义，例如可编辑的富文本组件（即段落）。
- 您需要在
edit中有一些逻辑才能在选择后在后端实际显示图像。下面只是一个需要进一步优化的简单版本（因为您无法通过这种方式选择其他图像）。 将<div class="feature-icon-container"></div>中完整的edit结构替换为：
<div class="feature-image-container">
{ image === '' ?
<MediaUpload
onSelect={onSelectImage}
type="image"
value={image}
render={ ( { open } ) =>
<IconButton
onClick={ open }
icon="upload"
className="editor-media-placeholder__button is-button is-default is-default">
Select Image
</IconButton>
}
/>
:
<img class="feature-icon" src={ image } />
</div>
- 将
save中的双花括号改为单花括号。否则，您的 URL 字符串将被包装在一个对象中。
<img class="feature-icon" src={ image } />
也许最好将 MediaUpload 移动到控件侧边栏，这样可以更轻松地保留更改所选图像的功能。此外，如果您设置了默认图像，则无法根据检查空 image 字符串作为条件。但我会把这留给你。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
