Question

我看了其他答案，其中没有一个似乎工作，这就是为什么我决定重新问这个问题并告诉你我的代码，所以你可以帮助我，所以这里是：

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 +“＆amp; api_key = api”）; apikey无效（这是故意的）;

Answer 1

一些事情：

jsfiddle中没有jQuery。确保你的代码中有它。
如果您的网页使用https://协议，请拨打https:// api电话。

setAttribute

id会输入错字。仔细看。
您在image['data'][0]['embed_url']获得的网址不是图片网址，而是网页网址。尝试控制台登录并查看。所以你真的不能把它设置为一些img标签的src。找到正确的图片网址，然后继续。

图像不在网站上呈现？

1 个答案: