关于js的动态添加image标签的问题
本帖最后由 冥月影 于 2019-8-27 14:35 编辑添加的image图片一直显示不出来怎么办，就算是本地图片也不行，求各位大佬帮忙看下。。。
可以了，谢谢那两位大佬。。。
// 原来创建image标签要用img的，我还以为是直接用image。。。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript测试</title>
<style type="text/css">
.btn {
width: 100px;
height: 50px;
background-color: #23b8ff;
}
</style>
<script language="JavaScript">
function test1() {
let a = document.getElementById("test1");
let img = document.createElement("img");
img.setAttribute("src", "http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http://p8.qhimg.com/bdm/800_600_100/t016eeb47f29fa12fa0.jpg");
// 设置大小和显示,不然图片大小会变成0 x 0;
img.style.width = "400px";
img.style.height = "300px";
img.style.display = "block";
a.appendChild(img);
}
function test2() {
let a = document.getElementById("test2");
let img = document.createElement("img");
img.setAttribute("src", "01.jpg");
img.style.width = "400px";
img.style.height = "300px";
img.style.display = "block";
a.appendChild(img);
}
</script>
</head>
<body>
<center>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button><br />
这是点击按钮1后添加的网络图片<br />
<p id="test1"></p>
这是点击按钮2添加的本地图片<br />
<p id="test2"></p>
<p>
这是手动添加的网络图片<br />
<image src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http://p8.qhimg.com/bdm/800_600_100/t016eeb47f29fa12fa0.jpg" />
</p>
<p>
这是手动添加的本地图片<br />
<image src="01.jpg" />
</p>
</center>
</body>
</html>
效果图：
你把图片换成这个再试下：‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566896434828&di=c4e53ed133f859609eec06cba7d0937e&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fdc54564e9258d1092f7663c9db58ccbf6c814d30.jpg’ quanhao1993 发表于 2019-8-27 14:13
你把图片换成这个再试下：‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=156689 ...
不是图片路径的问题，我那路径都一样，可是js添加的就是加载不出来，或者说根本没有加载 冥月影 发表于 2019-8-27 14:17
不是图片路径的问题，我那路径都一样，可是js添加的就是加载不出来，或者说根本没有加载
为什么我点击你的路径成下载图片了？ quanhao1993 发表于 2019-8-27 14:19
为什么我点击你的路径成下载图片了？
不清楚。。。 你的图片和html是在一个路径吗 本帖最后由 badyun 于 2019-8-27 14:30 编辑
你按钮都没绑定事件，怎么可能触发，想啥嘞。。。。。。而且js添加img标签，不是image标签。。。。害我想半天图片为啥出不来，最后才发现标签错了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript测试</title>
<style type="text/css">
.btn {
width: 100px;
height: 50px;
background-color: #23b8ff;
}
</style>
<script language="JavaScript">
function test1() {
let a = document.getElementById("test1");
let img = document.createElement("img");
img.setAttribute("src", "http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http://p8.qhimg.com/bdm/800_600_100/t016eeb47f29fa12fa0.jpg");
// 设置大小和显示,不然图片大小会变成0 x 0;
img.style.width = "400px";
img.style.height = "300px";
img.style.display = "block";
a.appendChild(img);
}
function test2() {
let a = document.getElementById("test2");
let img = document.createElement("img");
img.setAttribute("src", "01.jpg");
img.style.width = "400px";
img.style.height = "300px";
img.style.display = "block";
a.appendChild(img);
}
</script>
</head>
<body>
<center>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button><br />
这是点击按钮1后添加的网络图片<br />
<p id="test1"></p>
这是点击按钮2添加的本地图片<br />
<p id="test2"></p>
<p>
这是手动添加的网络图片<br />
<image
src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http://p8.qhimg.com/bdm/800_600_100/t016eeb47f29fa12fa0.jpg" />
</p>
<p>
这是手动添加的本地图片<br />
<image src="01.jpg" />
</p>
</center>
</body>
</html> 老哥, 没看到你调用test1() 和 test2() 方法啊 , 你只是给了ID 和方法, 并没有添加事件 本帖最后由 快乐小风 于 2019-8-27 14:30 编辑
let img = document.createElement("image");
//img标签
let img = document.createElement("img"); 快乐小风 发表于 2019-8-27 14:24
老哥, 没看到你调用test1() 和 test2() 方法啊 , 你只是给了ID 和方法, 并没有添加事件
不好意思，没有添加时间是我代码复制错了。。。，原来image标签创建要用img的吗。。。可以了，谢谢
页:
[1]
2