Блог

Я хочу получить свой список из Laravel API. Данные моего списка извлекаются, но я сталкиваюсь с некоторой проблемой для извлечения деталей с помощью изображения

мой card.js компонент

 import React, {useState, useEffect}  from 'react';
import {Link} from 'react-router-dom';


const Card = ({pet}) => {

 return(
    <div>
       <div className="listing-block">
       <div className="listing-image">
      <img src="http://localhost:8000/storage/uploads/puppies/{pet.pet_image_ids}" alt={pet.pet_image_ids}/>
      </div>
            <div className="listing-content">
                <div className="tag ondeposite">ON Deposite</div>
                <h3>{pet.pbrd_display_name}</h3>
                <h4>{pet.pet_gender}, {pet.plttr_birthdate}</h4>
                <h5>{pet.loc_receipt_name}</h5>
                <Link to="/description" className="boxed-btn3">View Puppy</Link>
            </div>
        </div>
    </div>
    )
 }
 export default Card;
  

API, который я пытаюсь извлечь

 {
"data": {
    "id": 2,
    "pbrd_display_name": "Bichon-Poodle",
    "plttr_birthdate": "2018-12-22",
    "pet_gender": "Male",
    "pstatus_name": "-7",
    "ptype_name": "Dog",
    "pet_currently_at_entity_id": "4",
    "loc_receipt_name": "New Haven",
    "pet_image_ids": "1.png",
    "pet_image_file_ids": null,
    "ptim_imgfile_file_ids": null,
    "pet_video_ids": null,
    "pet_video_file_ids": null,
    "loc_contact_numbers": "2039011003",
    "description": "The Basset Hound stands no higher than 14 inches at the shoulder but, with his remarkably heavy bone, powerful little legs, and massive paws, he possesses big-dog strength and stamina. Bassets are famous for a large, domed head that features extremely long, velvety ears, mournful eyes, and a wrinkled brow, which give the breed the look of a sad clown. Built more for endurance than speed, the Basset moves in a deliberate but effortless manner. The breed’s scenting ability is uncanny; it’s said that among dogs only the nose is more accurate. Mild and agreeable at home, the Basset is stubborn on the trail and barks in a loud, ringing voice. Although they may not be wildly demonstrative in their affections, they are steadfastly loyal.",
    "created_at": "2020-10-07T17:52:38.000000Z",
    "updated_at": "2020-10-07T17:52:38.000000Z"
},
"status": "success"
}
  

мой путь к изображению

 http://localhost:8000/storage/uploads/puppies/6.png
  

пожалуйста, помогите мне…Заранее спасибо

Попробуйте это

  <img src={"http://localhost:8000/storage/uploads/puppies/" pet.pet_image_ids} alt={pet.pet_image_ids}/>