无法在页面上显示自定义元框上传图像

Question

无法显示我创建的自定义帖子类型的输出。所有人都在后端工作，但我似乎无法在前端显示上传的图像。

我已经使用过这方面的教程，但我知道傻事一定是错的。

Functions.php

/**
 * Add Hero image meta box.
 */
function add_hero_fields_meta_box() {
    add_meta_box(
        'hero_fields_meta_box', // $id
        'Hero Image', // $title
        'show_hero_fields_meta_box', // $callback
        'page', // $screen
        'normal', // $context
        'high' // $priority
    );
}
add_action( 'add_meta_boxes', 'add_hero_fields_meta_box' );

function show_hero_fields_meta_box() {
    global $post;  
        $meta = get_post_meta( $post->ID, 'hero_fields', true ); ?>

    <input type="hidden" name="your_meta_box_nonce" value="<?php echo wp_create_nonce( basename(__FILE__) ); ?>">

    <!-- All fields will go here -->
    <script>
    jQuery(document).ready(function ($) {
      // Instantiates the variable that holds the media library frame.
      var meta_image_frame;
      // Runs when the image button is clicked.
      $('.image-upload').click(function (e) {
        // Get preview pane
        var meta_image_preview = $(this).parent().parent().children('.image-preview');
        // Prevents the default action from occuring.
        e.preventDefault();
        var meta_image = $(this).parent().children('.meta-image');
        // If the frame already exists, re-open it.
        if (meta_image_frame) {
          meta_image_frame.open();
          return;
        }
        // Sets up the media library frame
        meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
          title: meta_image.title,
          button: {
            text: meta_image.button
          }
        });
        // Runs when an image is selected.
        meta_image_frame.on('select', function () {
          // Grabs the attachment selection and creates a JSON representation of the model.
          var media_attachment = meta_image_frame.state().get('selection').first().toJSON();
          // Sends the attachment URL to our custom image input field.
          meta_image.val(media_attachment.url);
          meta_image_preview.children('img').attr('src', media_attachment.url);
        });
        // Opens the media library frame.
        meta_image_frame.open();
      });
    });
  </script>


    <p>
    <label for="hero_fields[image]">Image Upload (Upload your preferred hero image here)</label><br>
    <input type="text" name="hero_fields[image]" id="hero_fields[image]" class="meta-image regular-text" value="<?php  if (is_array($meta) && isset($meta['image'])){ echo $meta['image']; } ?>">
    <input type="button" class="button image-upload" value="Browse">
</p>
<div class="image-preview"><img src="<?php if (is_array ($meta) && isset ($meta['image'])){ echo $meta['image']; } ?>" style="max-width: 250px;"></div>


    <?php }
    function save_hero_fields_meta( $post_id ) {   
    // verify nonce
    if ( !wp_verify_nonce( $_POST['your_meta_box_nonce'], basename(__FILE__) ) ) {
        return $post_id; 
    }
    // check autosave
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return $post_id;
    }
    // check permissions
    if ( 'page' === $_POST['post_type'] ) {
        if ( !current_user_can( 'edit_page', $post_id ) ) {
            return $post_id;
        } elseif ( !current_user_can( 'edit_post', $post_id ) ) {
            return $post_id;
        }  
    }

    $old = get_post_meta( $post_id, 'hero_fields', true );
    $new = $_POST['hero_fields'];

    if ( $new && $new !== $old ) {
        update_post_meta( $post_id, 'hero_fields', $new );
    } elseif ( '' === $new && $old ) {
        delete_post_meta( $post_id, 'hero_fields', $old );
    }
}
add_action( 'save_post', 'save_hero_fields_meta' );

然后在我的页面模板中，我将它放在标题下方：

<div id="hero">
        <img src="<?php  if (is_array($meta) && isset($meta['image'])){ echo $meta['image']; } ?>">
    </div>