使用React在Gutenberg的后端渲染图像

问题描述

我正在React JSX的帮助下构建动态的古腾堡块,我从自定义帖子类型“故事”中提取帖子并进行显示,并且一切都在前端呈现良好,但是以某种方式无法呈现特色图像后端编辑器。请检查下面的代码参考。 这是我的后端index.js,

  edit: withSelect( select => {
            return {
                posts: select( 'core' ).getEntityRecords( 'postType','story' )
            };
            } )( ( { posts,className,isSelected,setAttributes } ) => {
                if ( ! posts ) {
                    return (
                      <p className={className} >
                          <Spinner />
                          { __( 'Loading Posts','mg-blocks' ) }
                      </p>
                    );
                }
                if ( 0 === posts.length ) {
                    return <p>{ __( 'No Posts','mg-blocks' ) }</p>;
                }
                return (
                  <section class="section section--stories section--stories-content">
                    <div class="container">
                      <div class="filters-content">
                      <div class="row">
                        { posts.map( story => {
                          console.log(story)
                          return (
                            <div class="col-md-4 filter-Box tag-active">
                              <div class="Box">
                                <div class="Box-img-wrapper">
                                  **<img class="Box-img" src={ story.jetpack_featured_media_url } />**
                                </div>
                                <div class="Box-inner">
                                  <span class="Box-tag"> Stories </span>
                                  <a class="Box-title" href="">
                                    <span>{ story.title.rendered }</span>
                                  </a>
                                </div>
                              </div>
                            </div>
                          );
                        }) }
                      </div>
                      </div>
                    </div>
                  </section>
                );

enter image description here

请提出解决方案,谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)