Question

我想从<button>显示图像，但似乎存在某种问题。

我无法显示图像。我已经阅读了一些关于Javascript和OOP的文章，我只是不知道我是否正确地使用了它们。

现在转到我的代码，这里看起来像：

function myFunction() {
    function Image(src, height, width) {
        this.src = src;
        this.height = height;
        this.width = width;
    }
    image.prototype.display = function () {
        document.body.appendChild(image);
    }
    var image = new Image("image.jpg", "200", "200");
    image.display();
}
}

希望你帮帮我:)。

Answer 1

您需要创建一个DOM元素并向其添加属性。这是关于jsfiddle的一个工作示例：

http://jsfiddle.net/LADXL/

function myFunction() {

    function Image (src, height, width) {
        this.src = src;
        this.height = height;
        this.width = width;
    }

    Image.prototype.display = function() {
        var img = document.createElement('img');
            img.setAttribute("src", this.src);
            img.setAttribute("height", this.height);
            img.setAttribute("width", this.width);
        document.body.appendChild(img);
    }

    var image = new Image ( "http://www.zwani.com/graphics/hello/images/10.gif", "200" , "200" );

    image.display();
}

myFunction();

Answer 2

Seens在你定义自己的Image类时，你似乎没有提供任何值得渲染的DOM。

您的display方法可能看起来更像（注意Image的大小写）：

Image.prototype.display = function() {
    // probably actually want to put this in the constructor
    // i.e., one img element per Image object
    var image = document.createElement("img");
    image.src = this.src;
    image.style.height = this.height;
    image.style.width = this.width;
    // also probably don't want to append to body every time
    // display is called, style.display = "inline" or similar
    // would be better with a corresponding hide method
    document.body.appendChild(image);
}

使用Javascript OOP进行图像显示

2 个答案: