Question

对于HTML项目，我需要一个显示添加图像的按钮，这需要打开一个文本框。

如果您将图像的URL放入此中，则需要在当前页面上显示图像。

是否有任何工作示例或Jsfiddle来实现这一目标？使用Javascript。

Answer 1

var image = document.getElementById('image');

function getUrl() {
    var url = prompt('Enter image URL');
    
    if (url) { // Do string and URL validation here and also for image type
        return url;
    } else {
        return getUrl();
    }
}

image.src = getUrl();

<img id="image"/>

Answer 2

要获取图片的网址，您只需使用prompt即可。获得URL后，您要做的就是加载图像，检查它是否真的是一个图像（例如，不仅仅是.html文档），然后显示它。

var img = new Image();
    img.src = prompt("Url of a picture:");
    
    // The URL isn't valid or the resource isn't a picture
    img.onerror = function() { alert("Provided URL does not point to a valid picture.") };
    
    // Ok, we have correct picture; display it
    img.onload = function() {
        document.getElementById("yourImgElement").src = img.src;
    };

<img id="yourImgElement">

输入图像的URL并以Javascript / HTML格式显示在页面上

2 个答案: