使用 js 将图像从 url 添加到画廊 html答案

【问题标题】：add a image from a url to a gallery html using js使用 js 将图像从 url 添加到画廊 html
【发布时间】：2016-12-06 06:19:47
【问题描述】：

您好，我是 javascript 新手，看过但似乎无法解决我的问题。我希望向用户询问图像的 url，并将其添加到使用 html 和另一个 js 文档制作的画廊中。画廊很好，只需要想办法添加一个新的 img 标签，里面有 url。

这是我目前所拥有的：

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 .

【问题讨论】：

JavaScript change img src attribute without jQuery的可能重复
不要破坏你的帖子。

标签： javascript html

【解决方案1】：

创建一个新的图片标签并在prev按钮之前插入到滑块中

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

注意： Javascript 不需要执行表单提交。我们可以在onclickonmouseover这样的任何活动中使用它

演示：-

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>

【讨论】：

它成功了，非常感谢，不仅如此，我也理解你所做的，所以也非常感谢。

【解决方案2】：

这是你的意思吗？

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

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

【讨论】：

感谢您的回复，我希望将图像添加到已经存在的图像下方的滑块 div 中，并将 src="imputed url"。我是新手，所以这就是为什么我觉得很难做到。再次感谢。
对不起，我可能仍然不明白你想要什么，但如果你想将 url 附加到已经在三个图像下的图像，只需使用：var img = document.getElementById("image "); img.src = "你的网址"; @JohnOKeeffe

【解决方案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>

【讨论】：