Question

我正在尝试创建该图像，以便当我单击该图像时，另一张图像将显示在同一页面上，但是截至目前，当我单击该图像时，它只为我提供了图片链接，而不是为我提供图片。

<!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>

Answer 1

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。

希望这会有所帮助！

Answer 2

图像源（链接）必须与其img标签相关联，才能与innerHTML一起使用这里srcdata保存着img元素：

document.getElementById("ima1").addEventListener("click", showPic4);
function showPic4() {
   var srcdata="<img id='ima1'  src="+images[0]+"  style='width:150px'>";
   document.getElementById("image1").innerHTML = srcdata;
}

Answer 3

在您的示例中，您只有一个文本字符串。您需要以现有的<img>为目标并修改src属性或创建新的<img>。我已经做了第二个选择。

有很多方法可以做到这一点，并且对于哪种方法最好是存在很多争议。

var images = [
  'https://i.imgur.com/xwZRPaT.jpg'

];

document.getElementById("ima1").addEventListener("click", showPic4);

function showPic4() {
  document.getElementById("image1").innerHTML = "<img src=" + images[0] + ">";
}

<!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>
  </script>

</body>

</html>

如何将图像源存储在阵列中？

3 个答案: