Import Local image from object in React

Active3 hr before
Viewed126 times

7 Answers


How can I source a local image file into an object, just like the above example?, how to import images as sprites instead of default textures in unity ,Join Stack Overflow to learn, share knowledge, and build your career.

It looks like you are exporting an object from Gallery.js, so try logo.logo. You could use just logo if you export default logo.

const IMAGES = [{
   src: logo.logo
load more v

 Pretag team - issue, fix, solve, resolve

I found another way of displaying images/logos from JSON/JS Objects.,The only images I can display are the one hosted on a server, but nothing from my local.,Do you think this warning could be preventing my image from displaying ? Because this feels like a long shot.

This is the part of my Component where I try to display the logo:

import { companyData } from '../data.js';

const DisplayJobs = () => {
  return (
        {, key) => {
          return (
              <div id="wrapper-jumbo">
                <Jumbotron key={key} id="jumbo">
                        <img src={data.logo} />

And this is part of my JSON (I changed it from .JSON to .JS):

export const companyData = [{
   "id": 1,
   "company": "Photosnap",
   "logo": "./images/photosnap.svg"
load more v

importing images with Reactbasic image import with React,You need to import the picture into the React component. Say our image is in the same folder as our React component, your import would look something like this.,Create a layout component using ReactQuick and easy way to stop importing header/nav/footer components in routes

<img src=“smiley.gif" alt="Smiley face">
load more v

Put the image file somewhere under the src folder. This alone will not automatically make it available, so you have to import the image into the React component where you’re using it.,You can put the image file in the public folder (or if this is not Create React App… then any folder that will be copied to the server).,Wherever you want to display the image, render your img tag and pass that variable as the src:

import companyLogo from './path/to/logo.jpg';
load more v

When it comes to dynamically load and import images during runtime. It’s easy to get challenged trying to dynamically load images on production.,In this quick article, I will give you some approaches that worked well for me with regards to dealing with images loaded dynamically both locally and on production.

 Pretag team - issue, fix, solve, resolve

if you want to display the image in react, Create a component as follows.,Here, The image url is loaded in the component and displays to browser. There are couple of improvements to this component,Call the above component created with passing url=myimage

<img src="" alt="display image" />
load more v

Other "local-import" queries related to "Import Local image from object in React"