图像没有在网站上呈现？答案

【问题标题】：images are not rendering on website?图像没有在网站上呈现？
【发布时间】：2017-10-18 17:27:54
【问题描述】：

我查看了其他答案，但它们似乎都不起作用，这就是为什么我决定重新提出问题并向您展示我的代码，以便您可以帮助我，所以这里是：

function searchForm() {
	var body = document.getElementsByTagName('body')[0]
	var search = document.getElementById('GIF-search').value;
	var content = document.getElementById('content')


	var xhr = $.get("http://api.giphy.com/v1/gifs/search?q=" + search + "&api_key=api");
	xhr.done(function(data) {
		var image = data; 
		var GIF = image['data'][0]['embed_url'];

		var GIF_image = document.createElement('img');
		GIF_image.setAttribute('src', GIF);
		GIF_image.setAttribue('id', 'GIF');

		content.appendChild(GIF_image)




	});
}
var searchGIF = document.getElementById('search_GIF')
searchGIF.addEventListener('click', searchForm, false);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>GIF viewer</title>
	<style type="text/css">
		#content {
			width: 100%
		}
		img {
			width: 250px;
			height: 250px
		}
	</style>
</head>
<body>
<div id="Search">
	<input type="text" name="" id="GIF-search">
	<button id="search_GIF">Search GIFs</button>
</div>
<div id="content"></div>
	<script src="jquery-3.2.1.js"></script>
	<script src="GIFsearch.js"></script>
</body>
</html>

我的问题是，我在我的网站上得到了一张空白图片，谁能解释为什么会发生这种情况以及我该如何解决它，以便它真正显示 GIF？

顺便说一句，我知道 $.get("http://api.giphy.com/v1/gifs/search?q=" + search + "&api_key=api"); apikey 无效（这是故意的）；

【问题讨论】：

你的代码中包含了 jQuery 吗？
是的，我已经包含了 jquery
"ReferenceError: $ is not defined" 你需要在你的 sn-p 中包含 jQuery。
当我运行它时，我没有收到任何错误，只是一个空图像
请发布一个带有一些工作 api 密钥的 jsfiddle。您可以稍后更改 api 密钥..

标签： javascript jquery html css ajax

【解决方案1】：

几件事：

jsfiddle 中没有 jQuery。确保您的代码中有它。
如果您的页面使用https:// 协议，请调用https:// api。
setAttribute 在设置 id 时出现拼写错误。仔细看。
您在image['data'][0]['embed_url'] 获得的网址不是图片网址，而是网页网址。尝试控制台记录并查看。所以你不能真正将它设置为某个 img 标签的 src。找到正确的图片网址，然后继续。

【讨论】：

如果以上答案对你有帮助，请点赞。对以后来这篇文章的人有帮助。:)