CODEWITHSUNDEEP
reactjslaravel
ayush srivastava
ayush srivastava

Reputation: 49

Accessing upload image from Laravel Api in ReactJs Component

I want to fetch my list from Laravel API. My List details are fetched but I am facing some troubling issue to fetch details with image

my card.js component

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 which i try to fetch

{
"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"
}

my image path

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

enter image description here

please help me...Thanks in advance

Upvotes: 1

Views: 557

Answers (1)

krimo
krimo

Reputation: 684

Try this

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

Upvotes: 2

Related Questions