Home > OS >  Image from json file is not displayed on the website
Image from json file is not displayed on the website

Time:10-22

I want to fetch images from json to javascript function but instead of displaying the image it instead just displays the name of image file. Below is the javascript function

            import React from "react";
        import IosAppName from './appStoreData.json';
        import './Ios_search.css';
        import {useState} from 'react';

        function Ios_search(){
            const[searchTerm, setSearchTerm] = useState('')
            return(
                <div className='ios'>
                    <input type='text' placeholder='Search' onChange={event => {setSearchTerm(event.target.value)}}></input>
                    {IosAppName.filter(
                        app_name =>{
                            if(searchTerm == '') return ''
                            else if(app_name.appStore.toLowerCase().includes(searchTerm.toLowerCase())) return  app_name
                        }
                        
                    )

                    .map((all_app_names) => {return <p>{all_app_names.appStore} {all_app_names.image}</p>})}
                </div>
            );
        }

        export default Ios_search;

And this is the dummy data

  • Related