Question

我无法获得图片（在本例中为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上查看”

Answer 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>

图片未附加到卡上

1 个答案: