Wie bekomme ich die Bildquelle und zeige das Bild?

Question

Hallo Jungs, ich möchte wissen, wie die src des Bildes erhalten wir so ein:

:

und das Bild in der Basis der URL nach Show, aber das Bild sollte Kreis so sein

wie dies in der Mitte in einer uRL und im linken Bild:

ich habe einige 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

Wenn Sie Javascript verwenden, um die Eigenschaft .src eines Tags auf die gewünschte Bild-URL zu setzen, zeigt der Browser dieses Bild an.

Hier ist ein einfaches Beispiel:

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

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

Formatierungen oder Positionierung des Bildes muss offensichtlich von Ihrem Markup oder CSS erfolgen. Dies zeigt Ihnen das Bild anzuzeigen.