Issue
I am trying to loop through an object from a JSON file with the file name "product.json" that looks like this and try to get the image
{
"product_arr" : [
{
"name": "Nature Patterned Envelope Files",
"price": 100,
"was_price": false,
"reviews": 90,
"img": 1
}
}
this is how the files are set in my root folder
But unfortunately, what I have tried doesn't work
In my file "shop.php" I have done this
<?php
$jsonPath = './product.json';
$jsonString = file_get_contents($jsonPath);
$data = json_decode($jsonString);
?>
<?php foreach ($data as $key => $jsons) {
foreach ($jsons as $key => $product) {
?>
<div class="col-lg-4 col-md-6 col-sm-12 pb-1">
<div class="card product-item border-0 mb-4">
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<img class="img-fluid w-100" src="<?php echo $product->img; ?>" alt="">
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3"><?php echo ucfirst($product->name); ?></h6>
<div class="d-flex justify-content-center">
<h6>$<?php echo ($product->price); ?></h6>
<?php
if ($product->was_price == false) {
} else {
echo "<h6 class='text-muted ml-2'><del>$$product->was_price</del></h6>";
}
?>
</div>
</div>
<div class="card-footer d-flex justify-content-between bg-light border">
<a href="" class="btn btn-sm text-dark p-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="" class="btn btn-sm text-dark p-0"><i class="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
</div>
</div>
</div>
<?php
}
}
?>
All other things are looping and displaying on my web page, but my images are not displaying.
Please can someone help me out on this?
Solution
According to your (invalid JSON) example $product->img
should be 1
. There is no file named 1
in your project. Add the folder (/img/
) and the extension (.jpg
) to your image source:
<img class="img-fluid w-100" src="img/<?php echo $product->img; ?>.jpg" alt="">
Answered By - brombeer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.