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