Как добавить изображение с помощью json

Я создаю сайт электронной коммерции. Я столкнулся с проблемой отображения изображения на домашней странице. все соответствующие данные показали успех. единственное изображение не могло быть отображено. Ошибок при проверке консоли не возникало. То, что я пробовал до сих пор, я приложил ниже.

Json**$("#Products").append("<img id='theImg' src='images/' + data[i].image + ' />'");** это написанный мной код добавления изображения.

   function getProducts(){
        $.ajax({
            type: 'GET',
            url: 'all_product.php' ,
            dataType: 'JSON',
            success: function (data) {
                console.log(data);

                for (var i = 0; i < data.length; i++)
                {
                    $("#Products").append("<img id='theImg' src='images/'  + data[i].image  + ' />'");
                    $('#Products').append('<h5>' + data[i].description +  '</h5>');
                    $('#Products').append('<p>' + data[i].price +  '</p>');
                }
            },
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    }

all_product.php

<?php
include("db.php");

$stmt = $conn->prepare("select id,cat_id,brand_id,price,description,image,keywords from products order by id DESC");
$stmt->bind_result($id,$cat_id,$brand_id,$price,$description,$image,$keywords);

if($stmt->execute())
{
    while($stmt->fetch())
    {
        $output[] = array("id"=>$id, "cat_id" =>$cat_id, "brand_id"=> $brand_id,"price"=> $price, "description"=> $description,
            "image"=> $image, "keywords"=> $keywords);
    }
    echo json_encode($output);
}

$stmt->close();
?>

Дизайн

<div class="card" style="width: 18rem;" id="Products">
                    <img id="theImg">
                    <div class="card-body">
                        <h5></h5>
                        <p class="card-text"></p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
  </div>

Если приведенный ниже ответ не работает, можете ли вы в какой-то момент выполнить console.log(data[i].image); и убедиться, что это действительно ваше имя изображения? И если эта переменная не соответствует вашим ожиданиям, выполните error_log($image) в PHP в цикле while.

Torxed 26.10.2018 08:06
1
1
368
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

$("#Products").append("<img id='theImg' src='images/"  + data[i].image  + "' class='your-css-class' />");

Что показывает строка console.log(data); в консоли? @ Creativeone2018

melvin 26.10.2018 08:05

да сэр. brand_id: 3 cat_id: 1 description: "только колпачки" id: 2 image: "2.jpg" ключевые слова: "колпачки" цена: 200

creative one2018 26.10.2018 08:08

Я думаю, проблема в теге img, сэр. есть ли ошибка в теге img

creative one2018 26.10.2018 08:09

щелкните правой кнопкой мыши на пустом изображении и проверьте, будет ли результат в консоли выглядеть следующим образом <image is = "the Img" src = "images /" 2.jpg '= "">

creative one2018 26.10.2018 08:11

@ creativeone2018 скопируйте мой ответ и замените его своим. Были дополнительные кавычки

melvin 26.10.2018 08:13

Дайте класс тегу изображения, как в моем ответе, и примените CSS в своей таблице стилей @ creativeone2018

melvin 26.10.2018 08:19

css, вы можете мне помочь, сэр

creative one2018 26.10.2018 08:21

У вас есть таблица стилей? @ Creativeone2018

melvin 26.10.2018 08:21

я этого не писал.

creative one2018 26.10.2018 08:22

Затем просто создайте файл .css, например mystyles.css, и добавьте его на свою страницу. Внутри этого напишите свой css как img.your-class-name{ width:100px;height:100px;display:block;}

melvin 26.10.2018 08:24

@ creativeone2018 Добро пожаловать. Не стесняйтесь спрашивать, нужна ли вам помощь со стилем изображения. Хорошего дня

melvin 26.10.2018 08:26

если у меня возникнут сомнения по поводу php, как я могу связаться с вами, вы лучший программист

creative one2018 26.10.2018 08:28

Другие вопросы по теме