изображение не добавляется на карту

Question

Я не могу получить изображение (в данном случае логотип yelp) для добавления к текстовой ссылке.

Мы используем API Yelp и создаем карты результатов в рамках студенческого проекта.Все работает отлично, но мы, хотя было бы неплохо, чтобы ссылка на бизнес-страницу с полным криком была логотипом, а не просто текстом.

Поскольку JS изначально был написан кем-то из команды, он просто сказал "посетить веб-сайт "и был кликабелен, чтобы перейти на связанную страницу визг.Я подумал, что было бы просто добавить логотип 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)

при этом нет сообщений об ошибках в журнале консоли.просто нет логотипа.Должно быть "Посмотреть на логотипе"

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>