使用js將圖片從網址添加到圖片庫html使用js

-1

嗨，我是JavaScript新手，看起來似乎無法解決我的問題。我正在尋求向用戶提供一個圖像的網址，並將其添加到使用html和另一個js文檔製作的圖庫。畫廊很好，只需要找出一種方法來添加一個新的img標籤與其中的網址。使用js將圖片從網址添加到圖片庫html使用js

這是我到目前爲止有：

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，只是添加標籤，每次添加照片時的url照片。

來源

2016-12-04 John OKeeffe

[未經jQuery的JavaScript的變化IMG SRC屬性]的可能的複製（http://stackoverflow.com/questions/9731728/javascript-change-img-src-attribute-without-jquery） –

不要惡意破壞你的帖子。 –

創建一個新的圖像標籤和被

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

註上一個按鈕進入滑塊前插入： JavaScript不要求提交表單來執行。我們可以把它る任何事件像onclickonmouseover

DEMO： -

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>

來源

2016-12-04 17:13:10 jafarbtech

它工作的人非常感謝，並不孤單，但我明白你所做的也是如此感謝。 –

歡迎隊友:)歡迎SO :) – jafarbtech

這是你的意思嗎？

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

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

來源

2016-12-04 16:34:31

感謝您的回覆，我正在尋找添加圖像到滑塊div下面的圖像已經存在，並把src =「推定網址」。我對此很陌生，所以這就是爲什麼我很難做到這一點。再次感謝。 –

對不起，我可能仍然不明白你想要什麼，但如果你想追加到三個圖像下的圖像，只需使用：var img = document.getElementById（「image」）; Img.src =「你的網址」; @JohnOKeeffe –

試試這個：

$('.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>

來源

2016-12-04 17:32:51

使用js將圖片從網址添加到圖片庫html使用js

回答

相關問題