gpt4 book ai didi

javascript - 如何将图像源存储在数组中?

转载 作者:行者123 更新时间:2023-11-28 16:57:18 25 4
gpt4 key购买 nike

我正在尝试这样做,以便当我单击图像时,另一张图像将显示在同一页面上,但截至目前,当我单击图像时,它只给我图片链接,而不是给我图片。

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="output"></p>

<img id="ima1" src="https://i.imgur.com/pe18NpF.jpg" style="width:150px">
<div id="image1"></div>
<script>
var images = [
'https://i.imgur.com/xwZRPaT.jpg'
];

document.getElementById("ima1").addEventListener("click", showPic4);
function showPic4() {
document.getElementById("image1").innerHTML = images[0];
}

</script>

</body>
</html>

最佳答案

您的 JavaScript 的第一个问题就在这行:

document.getElementById("image1").innerHTML = images[0];

您在这里所做的是获取 id 为“image1”的 HTML 元素,然后将其内部 HTML 设置为 images[0] 中的值。

您获取图片链接而不是图像的原因是因为 images[0] 内的值是字符串,而不是图像。

有很多方法可以实现您最初的目标。与当前代码保持一致性的一种方法是定位 img 标签的 src 属性。考虑下面的代码块:

<img id="img1" src="https://large-type.com/twitter-card.png?v2" style='width:150px'>
<img id="img2" style='width:150px'></img>
<script>
var images = [
'https://images.megapixl.com/5692/56920966.jpg'
];

document.getElementById("img1").addEventListener("click", showPic);

function showPic() {
document.getElementById("img2").setAttribute('src', images[0]);
}
</script>

此处的区别在于 showPic 函数所针对的 HTML 元素是 img 元素而不是 div。现在我们可以像使用 setAttribute 对第一张图像所做的那样添加 img src功能。

希望这有帮助!

关于javascript - 如何将图像源存储在数组中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58760345/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com