如何使用 JavaScript 显示图像？
Posted
技术标签:
【中文标题】如何使用 JavaScript 显示图像？【英文标题】：How to display image with JavaScript? 【发布时间】：2011-07-24 00:19:37 【问题描述】：我正在尝试通过 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/
【讨论】：
小提琴显示了一个名为“添加 Google 徽标”的按钮。按下时，文本“Google 徽标”会添加到右侧。没有图像可见。我检查了 logo.gif 图像的存在并得到了 404 错误。当我将其更改为现有地址 (pinterest.at/pin/340655159306311689) 时，它又做了同样的事情。使用 Google Chrome 版本 60.0.3112.113（官方版本）（64 位）测试 你是对的@Sae1962，当我在 6 年前写这篇文章时，我有点知道在某些时候该 url 可能会返回 404 :-D 问题不在于你，而在于 ***，它没有一个连贯的页面，其中包含有关问题的所有内容但依赖于其他页面。 幸运的是，在这种情况下，即使图像损坏，也很容易“理解”这个概念。以上是关于如何使用 JavaScript 显示图像？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用javascript从PNG图像显示动画图像？ [ 像 gmail ]
如果 2 个字段的值相等，使用 Javascript 如何显示图像？
如果使用 javascript 或 jQuery 找不到源图像，如何显示图像标题
如何使用 Dropzone 在 React/Javascript 中显示/编辑 ActiveStorage S3 图像？