图片未附加到卡片答案

【问题标题】：image not appending to card图片未附加到卡片
【发布时间】：2023-03-17 13:30:02
【问题描述】：

我无法将图像（在本例中为 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”

【问题讨论】：

标签： javascript jquery html image dom

【解决方案1】：

这有几个问题：

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

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

3) a.html("Visit on" + imgYelp) 也不起作用，因为 imgYelp 是一个对象 - 你将它连接到一个字符串，这会将对象变成一个字符串，你会得到这个：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>

【讨论】：