Question 110768 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – Display image from another js file

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'
        },
   ]
Tags:

3

Answers


  1. 0

    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>
);
    Login or Signup to reply.
  2. 0

    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'
}]
    Login or Signup to reply.
  3. 0

    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>
          );
     })}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search