javascript - WordPress自定义图片上传

Question

我需要在 wp 插件中使用自定义图像字段，上传/设置功能一切正常，但在更改图像时出现问题:问题:当我已经有了一张图像并需要替换时，我从媒体库中选取新图像并提交，旧的一张图像保持可见，因此我可以看到两张图像。

我认为问题出在选择函数和附加部分，显然我在这里使用了错误的逻辑，下面是我的代码的 jquery+html 和问题的屏幕截图:

问题(两张图片):第一个应该替换为新的选择图像(第二个图像)

Two images screenshot

这是我的代码:

$('#btn-upload-image').on('click', function(e) {
        e.preventDefault();

        var button = $(this);
        var figure = button.siblings("figure");

        var custom_uploader = wp.media({
                title: 'Insert image',
                library: { type : 'image' },
                button: { text: 'Use this image' },
                id: 'library-' + (Math.random() * 10),
                multiple: false
            }).on('select', function() {
                var attachment = custom_uploader.state().get('selection').first().toJSON();
                figure.append( $('<img/>', { 'src': attachment.url }) );
                inputImage.val(attachment.url);
                inputImageId.val(attachment.id);
        })
        .open();
    });

和 html:

<div class="form-group">
                        <label>Image</label>
                        <figure></figure>
                        <button type="button" class="btn btn-primary" id="btn-upload-image">Upload Image</button>
                        <input type="hidden" name="image" id="input-image" />
                        <input type="hidden" name="image_id" id="input-image-id" />
                    </div>

Answer 1

问题是这样的:

figure.append( $('<img/>', { 'src': attachment.url }) );

append在目标元素的末尾插入内容，保留现有内容。在这种情况下，您想要的是将其中的内容替换为新内容(新图像)，因此:

figure.html( $('<img/>', { 'src': attachment.url }) );

html将目标元素中的任何内容替换为新元素。

希望有帮助!