javascript - 从 URL 输入渲染/预览图像

Question

我正在寻找一种在通过输入 URL 上传之前呈现图像的解决方案。

我的代码

<input name="thumbnail" placeholder="Post image URL here" />

我一直在尝试方法like this .将 onchange="readURL(this);" 添加到上述代码中没有任何作用。看起来它们只适用于本地文件。

Answer 1

使用输入的值作为图像标签的来源。您可以隐藏和显示图像标签，每次创建一个新图像，等待加载事件并显示一个微调器，使用默认图像，可能性是无限的。

$('[name="thumbnail"]').on('change', function() {
     $('img.preview').prop('src', this.value);
});

FIDDLE