如何使用 JavaScript 显示图像？

IT技术 javascript html image object
2021-02-05 08:41:42

我正在尝试通过 JavaScript 显示图像，但我不知道该怎么做。我有以下

function image(a,b,c)
{
  this.link=a;
  this.alt=b;
  this.thumb=c;
}

function show_image()
{
  document.write("img src="+this.link+">");
}

image1=new image("img/img1.jpg","dsfdsfdsfds","thumb/img3");

在 HTML 中

<p><input type="button" value="Vytvor" onclick="show_image()" > </p>

我不知道我应该把类似的东西放在哪里image1.show_image();。

HTML？或者别的地方...

1个回答

您可以使用Javascript DOM API。特别是，看看createElement()方法。

您可以创建一个可重复使用的功能，该功能将创建像这样的图像......

function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;

    // This next line will just add it to the <body> tag
    document.body.appendChild(img);
}

那么你可以像这样使用它......

<button onclick=
    "show_image('http://google.com/images/logo.gif', 
                 276, 
                 110, 
                 'Google Logo');">Add Google Logo</button>

在 jsFiddle 上查看一个工作示例：http : //jsfiddle.net/Bc6Et/

值得庆幸的是，在这种情况下，即使图像损坏，也很容易“理解”这个概念。
2021-03-24 08:41:42
小提琴显示了一个名为“添加 Google 徽标”的按钮。按下时，文本“Google 徽标”会添加到右侧。没有图像可见。我检查了 logo.gif 图像的存在并收到 404 错误。当我将其更改为现有地址（pinterest.at/pin/340655159306311689）时，它又做了同样的事情。使用 Google Chrome 版本 60.0.3112.113（官方版本）（64 位）测试
2021-03-26 08:41:42
:-D 问题不在于你，而在于 stackoverflow，它没有一个连贯的页面，其中包含关于一个问题的所有内容，但依赖于其他页面。
2021-03-31 08:41:42
你是正确的@Sae1962，当我在 6 年前写这篇文章时，我有点知道在某个时候网址可能会返回 404
2021-04-04 08:41:42
其它你可能感兴趣的问题
上一篇点击任何地方但这里事件 下一篇如何使用 ajax 从文件加载 JSON 对象？