使用 js 將圖像從 url 添加到畫廊 html

Question

嗨，我是 javascript 新手，看過但似乎無法解決我的問題。 我希望向用戶詢問圖像的 url，並將其添加到使用 html 和另一個 js 文檔制作的圖庫中。 畫廊很好，只需要想辦法添加一個帶有 url 的新 img 標簽。

這是我到目前為止：

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();
}`.slider image.src = getUrl();`



    <form action="" method="post" class="contact" id="contact" onsubmit="return getUrl()">
    <label for="name">Add Image url:</label>
        <input type="submit" value="submit">
    </form>

<div class="slider">
    <img src="gallery/img1.jpg" alt="image 1" />
    <img src="gallery/img2.jpg" alt="image 2" />
    <img src="gallery/img3.jpg" alt="image 3" />
    <img id="image"/>

    <button class="prev">&#60;</button>
    <button class="next">&#62;</button>
 </div>

如果您能提供任何幫助，那就太好了，謝謝。

編輯：我的問題是我想將 img 標簽添加到已經在 html 代碼中的圖庫中，但不更改已有照片的 src 並且每次添加帶有照片網址的照片時都添加標簽。

Answer 1

創建一個新的圖像標簽並在 prev 按鈕之前插入滑塊

    var slider = document.getElementsByClassName("slider")[0];
      slider.insertBefore(img,document.getElementsByClassName("prev")[0]);

注意： Javascript 不需要表單提交來執行。 我們可以讓它在任何事件上onmouseover比如onclick onmouseover

演示：-

 function getUrl() { var url = prompt('Enter image URL'); if (url) { // Do string and URL validation here and also for image type var img = document.createElement("img"); img.src = url; var slider = document.getElementsByClassName("slider")[0]; slider.insertBefore(img,document.getElementsByClassName("prev")[0]); } else { return getUrl(); }//`.slider image.src = getUrl();` }

 <label for="name">Add Image url:</label> <input type="submit" value="submit" onclick="getUrl();"> <div class="slider"> <img src="https://www.gravatar.com/avatar/69cf2e00c81bc89731652db2b9ca1dbf?s=32&d=identicon&r=PG&f=1" alt="image 1" /> <img src="https://www.gravatar.com/avatar/69cf2e00c81bc89731652db2b9ca1dbf?s=32&d=identicon&r=PG&f=1" alt="image 2" /> <img src="https://www.gravatar.com/avatar/69cf2e00c81bc89731652db2b9ca1dbf?s=32&d=identicon&r=PG&f=1" alt="image 3" /> <img id="image"/> <button class="prev">&#60;</button> <button class="next">&#62;</button> </div>

Answer 2

你是這個意思嗎？

Var img = Document.createElement("img");
Img.src = 'your url';

Var div = document.getElementById("imagesDiv");
Div.appendChild(img);

Answer 3

嘗試這個：

$('.slider').append(
                     $('<img></img>').
                     attr('src', yourUrl).
                     attr('alt', yourAlt)
                    );

只是不要忘記在 html 頁面的標題中添加指向 jQuery 的鏈接，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>