Javascript Question posted in
A very good W3school tutorial can be found here.

How to load image from javascript object in react

I have an object(user.js), App.js and an image(admin.png) in the same directory.

user.js

export const user =  {
   name: 'ADMIN',
   logo: './a.png'
}

Inside App component, I am trying to access the image, but it’s not working.

App.js

import { user } from './user.js'

function App() {
   return (
     <div>
        <h1>{user.name}</h1>
        <img src={user.logo} height={20} width={20} />
     </div>
   );
}

enter image description here

Tags:

2

Answers


  1. 0

    When you specify a relative path in the user.js file, it’s treated as a regular string, not as a module import, so the path won’t work as expected when using create-react-app or similar setups. Here’s how to correctly handle the image import:

    Import the Image Explicitly:
    Instead of specifying the image path as a string in your user.js, you should import the image directly in App.js. This way, Webpack or your build tool can resolve the path correctly.
    Here’s how you can modify your files:
    user.js

    export const user = {
   name: 'ADMIN',
   // Remove the logo path from here
}

    App.js

    import React from 'react';
import { user } from './user.js';
import adminLogo from './admin.png'; // Import the image directly

function App() {
   return (
     <div>
       <h1>{user.name}</h1>
       <img src={adminLogo} alt="Admin Logo" height={20} width={20} />
     </div>
   );
}

export default App;

    Using require (Alternative Approach):
    If you want to keep the image path in user.js, you can dynamically require the image in App.js:

    user.js

    export const user = {
   name: 'ADMIN',
   logo: './admin.png'
}

    App.js

    import React from 'react';
import { user } from './user.js';

function App() {
   return (
     <div>
       <h1>{user.name}</h1>
       <img src={require(`${user.logo}`)} alt="Admin Logo" height={20} width={20} />
     </div>
   );
}

export default App;

    In this alternative approach, require dynamically loads the image based on the path specified in the user object.

    Both methods will ensure that the image is correctly loaded and rendered in your React application. The first method is generally preferred for its simplicity and clarity.

    Login or Signup to reply.
  2. 0

    1. Try to directly import the Image in user.js: Since you’re using create-react-app or similar, you need to import the image file directly in user.js instead of using a string path.

    import logo from './admin.png';

export const user =  {
   name: 'ADMIN',
   logo: logo
};

    2. In App.js, use the code as is:

    import { user } from './user.js';

function App() {
  return (
    <div>
      <h1>{user.name}</h1>
      <img src={user.logo} height={20} width={20} alt="User logo"/>
    </div>
  );
}

export default App;
    1. Your project structure and code should look like this:
    • user.js
    • App.js
    • admin.png
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search