无法使用javascript更改图像的来源

cannot change the source of an image with javascript

本文关键字：图像 javascript      更新时间：2023-09-26

我正在尝试显示从控制器发送到视图的图像。在视图页面上，我想显示图像，我有两个按钮"前进"answers"后退"来迭代这些图像。

//controller:
var images= [path1 , path2, path3];
var currentImageIndex=0;
function goToNextImage() { // is called when forth button is clicked
   if (currentImageIndex +1 < images.length) {
      currentImageIndex ++;
       imageDisplay= ImageDisplay(images, currentImageIndex);
   }
}
$(document).ready(function() {
   imageDisplay= ImageDisplay(images, currentImageIndex);
   $('body').append(imageDisplay);
});

//我的索引文件的正文是空的。我将javascript文件中的所有内容都附加到正文中

// view (javascript file)
function ImageDisplay(images,currentImageIndex) {
var me = $('<div/>');
   drawImage();

 function drawImage( ) {
      var windowWidth= $(window).width();
      var windowHeight=$(window).height();
      var imageSrc= images[currentImageIndex];
      var image = $ ('<img id="img" src="'+imageSrc+'" alt="NO IMAGE" width="'+windowWidth/2+ '" height= "'+windowHeight/2+'" class="image_display"/>');
      console.log("image source= "+imageSrc);
    me.append(image);
}
return me ;
}

问题是显示的图像总是相同的（尽管图像源发生了变化）。我在这里读到用javascript更改图像源，我应该使用document.getElementById("img").src来设置新的源。但由于我的html文件中没有任何img id，我得到了这样的错误"无法将属性src设置为null"。

谢谢你的帮助！

var me = $('<div/>');基本上是（读：实际上）创建一个新节点。您正在向该节点添加内容，但实际上从未将其添加到DOM中。你的意思可能是这样的：

var newImage = ImageDisplay(images, currentImageIndex);
imageDisplay.replaceWith(newImage)
imageDisplay = newImage;

也就是说，我不知道您是否曾经在DOM中为imageDisplay分配过值。如果没有，则可能需要初始化该值。

相关文章：