我正在尝试显示从控制器发送到视图的图像。在视图页面上,我想显示图像,我有2个按钮“前进”和“后退”来迭代这些图像。
//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 ;
}
问题是显示的图像始终相同(尽管图像源发生了变化)。
我在这里阅读Change image source with javascript我应该使用document.getElementById("img").src
来设置新来源。
但由于我的html文件中没有任何img id,因此我收到此错误“无法设置属性src为null”。
谢谢你的帮助!
答案 0 :(得分:1)
var me = $('<div/>');
基本上(读取:实际上)创建一个新节点。您正在向该节点添加内容,但您实际上从未将其添加到DOM。你可能意思是这样的:
var newImage = ImageDisplay(images, currentImageIndex);
imageDisplay.replaceWith(newImage)
imageDisplay = newImage;
那就是说,我不知道你是否曾在DOM中分配imageDisplay
一个值。如果没有,那么您可能需要初始化该值。