使用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

回答

相关问题