时间戳

首页 > 解决方案 > 图片未附加到卡片

javascript - 图片未附加到卡片

问题描述

我无法将图像（在本例中为 yelp 徽标）附加到文本链接。

我们正在从 Yelp API 中提取结果并将结果卡片作为学生项目的一部分。一切都很好，但我们认为将业务完整的 yelp 页面的链接作为徽标而不是文本看起来会很好。

由于 JS 最初是由团队中的其他人编写的，因此它只是说“访问网站”并且可以单击以转到链接的 yelp 页面。我认为附加 yelp 徽标并解决问题会很简单。

我已经尝试过以我自己和其他人提出的建议的几种不同方式编写它，它仍然只显示文本（这是一个可点击的链接），但 img 没有附加。

// website
var websiteURL = response.businesses[i].url
//logo image for yelp
 var logo = imageObject.src = "assets/images/Yelp 
 Burst/Screen/Yelp_burst_positive_RGB.png"

 var cardBody1 = $("<p>")
 var a = $("<a>")                 
 a.attr("href", websiteURL)
 var imgYelp = $("<img>")
 a.attr("src", logo(imgYelp))
 a.html("Visit on" + imgYelp)                                     
 cardBody1.append(a)

以这种方式在控制台日志中没有错误消息。只是没有标志。应该是“查看LOGO”

标签： javascriptjqueryhtmlimagedom

解决方案

这有几个问题：

1）我看不到您附加cardBody1到页面的任何地方。你创建它，但它只是坐在那里无所事事。您需要插入页面（可能通过将其附加到已经是 DOM 一部分的现有元素），然后才会显示任何内容。

2）另外，尽管你提到了，据我所见，代码会产生一个控制台错误 - 请参阅 http://jsfiddle.net/4qdb3jfe。您定义logo为字符串，然后尝试像函数一样使用它。这是没有意义的。元素<a>也不需要“src”标签。我将假设您的意思imgYelp.attr("src", logo);是指定logo为图像的来源。

3)a.html("Visit on" + imgYelp)也不起作用，因为imgYelpis 一个对象 - 你将它连接到一个字符串，这会将对象变成一个字符串，你会得到这个：https ://jsfiddle.net/4qdb3jfe/1/ 。两个单独的附加会做得更好。

一旦你对所有这些进行了排序，那么你就会到达某个地方：

// website
var websiteURL = "https://miro.medium.com";
var imageObject = {};
//logo image for yelp
var logo = imageObject.src = "https://miro.medium.com/max/800/0*g3ns8QALNBBH7CBA."

var cardBody1 = $("<p>");
var a = $("<a>");
a.attr("href", websiteURL);
var imgYelp = $("<img>");
imgYelp.attr("src", logo);
a.append("Visit on");
a.append(imgYelp);
cardBody1.append(a);

$("#main").append(cardBody1);
body {
  font-family: system-ui;
  background-color: lightblue;
  margin: 20px;
}

img {
  height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">

</div>

推荐阅读