Переключить: получить путь к изображению из базы данных динамически

Question

У меня есть кнопка переключения рядом с каждым рецептом на моем сайте. У меня есть изображения в моей базе данных, которые я хотел бы показать. Каждая кнопка переключения будет отображать свое изображение.

Как я могу получить путь к изображению динамически?

Должен ли я иметь какой-то php для моего CSS или я должен добавить что-то еще в код Jquery?

<div class="toggle"  id="image<?php echo $recipe_id ?>"></div>

JQuery:

<script>
$(document).ready(function(){
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$(this).siblings('.content').toggle();
});
});
</script>

CSS:

.toggle {
background:url(/images/muffin.png) }

Прямо сейчас все кнопки переключения отображают одно и то же фиктивное изображение (muffin.png).

Answer 1

Чтобы составить список рецептов из вашей базы данных, у вас, вероятно, где-то есть такой запрос:

SELECT * FROM recipes

И после этого ваш PHP-скрипт, вероятно, просматривает результаты этого запроса.

Если это так, просто убедитесь, что запрос выбирает путь к изображению, а затем сделайте что-то вроде этого:

<div class="toggle" id="image<?php echo $recipe_id ?>" style="background:url(<?php echo $query_result["image_path"] ?>)"></div>

Если это не так, вы можете выполнить запрос, чтобы получить пути к изображениям для каждого рецепта в отдельности:

SELECT image_path FROM recipes WHERE recipe_id=$recipe_id

Затем используйте результат этого запроса.

Answer 2

Ну, есть несколько способов сделать это. Вы можете отобразить путь к изображению во время синтаксического анализа страницы в PHP, или вы можете использовать Ajax для подключения к PHP, рисования и пути и плюнуть обратно в JavaScript, где вы можете добавить тег изображения в DOM.

Я бы порекомендовал использовать более поздний метод, так как он более правильный, на мой взгляд. Я вижу, вы повторяете $ image_id. Стараться сделать

<img href="<?php echo $image_path; ?>">

и дайте мне знать, если это работает. Если нет, можете ли вы указать имя таблицы и имя столбца, в котором хранится путь к изображению? Также вы используете какие-либо PHP фреймворки?