如何获取图像的src并显示图像？

Question

大家好我想知道如何获取我们这样粘贴的图像的src：

并在显示网址底部的图片后，图片应该是这样的圆圈：

就像在网址的中心和左图中一样：

我有一些css：

`#preview-img-area {
    width: 125px;
    height: 125px;
    border-radius: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin: 10px auto auto;
    margin-top: 0;
    background-color: #222 !important;
}
#preview-img {
    border-radius: 100%;
    border-color: #222 !important;
    width: 125px;
    height: 125px;
    background: #222 !important;
}
.arrow-left {
    border-right: 10px solid #000;
    margin-left: 10px;
    margin-right: 5px;
    left: 0;
    top: 55px;
}
.nav2 {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.arrow-left, .arrow-right {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    cursor: pointer;
    top: 50%;
}
.arrow-right {
    border-left: 10px solid #000;
    margin-left: 5px;
    margin-right: 10px;
    right: 0;
    top: 55px;
}

Answer 1

如果您使用Javascript将.src标记的<img>属性设置为所需的图片网址，则浏览器将显示该图片。

这是一个简单的例子：

＆＃13;

＆＃13;

document.getElementById("imageURL").addEventListener("input", function(e) {
    document.getElementById("imagePreview").src = this.value;
})

＆＃13;

Paste Image URL Here: <input id="imageURL"><br><br>
<img id="imagePreview" height="200">

＆＃13;

＆＃13;

＆＃13;

图像的任何格式或位置显然都必须由您的标记或CSS完成。这表示您显示图像。