Display image from another js file-CodePudding

I've got a problem with showing image from js file. I really dont know what i can do with that. Can someone help me?

Code for main component:

import React from 'react'
import {jetData} from '../jetData'

const MainBar = () => {
  return (
    <div className='text-white'>
      {jetData.map((data, key) => {
          return (
            <div key={key}>
              {<img src={data.image} />   data.name}
            </div>
          );
        })}
    </div>
  )
}

export default MainBar

Code for js file with data:

    import f18 from './assets/jets/f-18cd-hornet.png'
    import f22 from './assets/jets/f-22-raptor.png'
    import mig29 from './assets/jets/mig-29.png'
    import su27 from './assets/jets/Sukhoi_Su-27SKM.png'
    
    export const jetData = [
        {
            image: {f18},
            name: 'F/A-18 Hornet'
        },
        {
            image: {f22},
            name: 'F-22 Raptor'
        },
        {
            image: {mig29},
            name: 'MiG-29'
        },
        {
            image: {su27},
            name: 'Su-27'
        },
   ]

CodePudding user response：

Check if this works i hope it will work sorry at this point i can not run it for you

return (
    <div className="text-white">
        {jetData.map((jet) => (
            <div key={jet.id}>
                <img src={jet.image} alt={jet.name} />
            </div>
        ))}
    </div>
);

CodePudding user response：

I think what you are trying to do is this:

import logo from './logo.svg';

<img src={logo} className="App-logo" alt="logo" />

Which works fine with .svg files, but not with .jpg and .png. The reason seems to be that import logo from './logo.svg'; stores the path in the variable, but import f18 from './assets/jets/f-18cd-hornet.png stores a, what to me looks like, a string representation of the image.

I think this is the way to go:

export const jetData = [
{
    image: './assets/jets/f-18cd-hornet.png',
    name: 'F/A-18 Hornet'
}]

CodePudding user response：

Your imports do not need to be in curly braces:

import f18 from './assets/jets/f-18cd-hornet.png'
import f22 from './assets/jets/f-22-raptor.png'
import mig29 from './assets/jets/mig-29.png'
import su27 from './assets/jets/Sukhoi_Su-27SKM.png'
    
export const jetData = [
        {
            image: f18,
            name: 'F/A-18 Hornet'
        },
        {
            image: f22,
            name: 'F-22 Raptor'
        },
        {
            image: mig29,
            name: 'MiG-29'
        },
        {
            image: su27,
            name: 'Su-27'
        },
   ]

Your map key will likely throw an error because you are using the index as a key. I would change it to the following

{jetData.map((data) => {
        return (
           <div key={data.name}>
              <img src={data.image} alt={data.name} />
            </div>
          );
     })}