在ReactJs组件中从Laravel Api访问上传图像

问题描述

我想从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}/>

laravel laravel reactjs reactjs