how do i reference a local image in react?

Import the image on top of the class and then reference it in your <img/> element like this I wanted to import multiple images and pass them to different components. It turned out that I need to import multiple images only once and I can use them in any component by passing a prop. You could create a file named for instance images.js and reference all your app resources there, later importing that component in all your other component where you would need to display images You can directly specify the image path using require('../pathToImh/img') in <img/> element like this

// Assuming logo.png is in the same folder as JS file
import logo from './logo.png';
​
// ...later
<img src={logo} alt="logo" />

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
} 

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). Webpack, Rollup, Parcel, and other bundlers all work conceptually the same way: when you import a static file, like an image or a CSS file, the bundler doesn’t literally paste that file in at the import location. Instead, it makes a note that this particular JS file depends on this particular image/CSS file/whatever.

import companyLogo from './path/to/logo.jpg';

function Home() {
  return (
    <div>
      <img src={companyLogo} alt="BigCo Inc. logo"/>
    </div>
  );
}

function Home() {
  return (
    <div>
      <img src="images/logo.jpg" alt="BigCo Inc. logo"/>
    </div>
  );
}

Let's now learn how we can import (local) images with React! We learned how to import local images using the import statement and the require() function in this article. In this article, we will learn how to import images with React and see the various ways this could be achieved. External images and local images are the two types of images we want to use in our React application. We are primarily concerned with local images in this article because external images do not require us to import them.

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

With webpack, using static assets like images and fonts works similarly to CSS. You can import a file right in a JavaScript module. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF. An alternative way of handling static assets is described in the next section. This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths.

import React from 'react';import logo from './logo.png'; // Tell webpack this JS file uses this imageconsole.log(logo); // /logo.84287d09.pngfunction Header() {  // Import result is the URL of your image  return <img src={logo} alt="Logo" />;}export default Header;

.Logo {
   background - image: url(. / logo.png);
}

import { ReactComponent as Logo } from './logo.svg';function App() {  return (    <div>      {/* Logo is an actual React component */}      <Logo />    </div>  );}

If the image is stored online, then we’ll just have to set the URL of the image to the src prop to link and display it, like we do in plain HTML. Another way to link an image in React is to place it in the public folder and reference it with its relative path. The advantage require() has here is that it doesn’t need to be at the top of the page. We can simply assign the result of require() to the src prop without having to store it in a variable. For example, if we placed the my-image.png file in the public folder, we’ll be able to display it in the page like this:

// 👇 import image from file
import myImage from './my-image.jpg';

export default function App() {
  return (
    <div>
      {/* 👇 show image */}
      <img src={myImage} alt="Trees" height="200" />

      <br />

      <span
        style={{
          color: 'green',
          fontSize: '1.2em',
          fontWeight: 'bold',
        }}
      >
        Trees
      </span>
    </div>
  );
}

export default function App() {
  return (
    <div>
      {/* 👇 */}
      <img
        src={require('./my-image.jpg')}
        alt="Trees"
        height="200"
      />

      <br />
      <span
        style={{
          color: 'green',
          fontSize: '1.2em',
          fontWeight: 'bold',
        }}
      >
        Trees
      </span>
    </div>
  );
}

export default function App() {
  return (
    <div>
      {/* 👇 show image */}
      <img src="./my-image.jpg" alt="Trees" height="200" />

      <br />

      <span
        style={{
          color: 'green',
          fontSize: '1.2em',
          fontWeight: 'bold',
        }}
      >
        Trees
      </span>
    </div>
  );
}

Update: This works if I first import the image with import img from './one.jpeg' and use it inside img src={img}, but I have so many image files to import and therefore, I want to use them in the form, img src={'image_name.jpeg'}. The best way is to import the image first and then use it. I have an image called one.jpeg inside the same folder as my component and I tried both <img src="one.jpeg" /> and <img src={"one.jpeg"} /> inside my renderfunction but the image does not show up. Also, I do not have access to webpack config file since the project is created with the official create-react-app command line util.

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
} 

React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this: You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s documentation for more insight, and create your own custom component when needed. A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

<Image source={require('./my-icon.png')} />

.├──button.js└── img├── check.png├──[email protected].png└──[email protected].png

<Image source={require('./img/check.png')} />

<Image  source={{ uri: 'app_icon' }}  style={{ width: 40, height: 40 }}/>

<Image  source={{ uri: 'asset:/app_icon.png' }}  style={{ width: 40, height: 40 }}/>

We need to import the launchImageLibrary from react-native-image-picker, which takes options and callback functions as arguments. Using options, you can specify the mediaType, selectionLimit, maxHeight, maxWidth, and other attributes. The callback method is called with the response object, which will basically set our pickerResponse state variable.  In this article, we will learn to display an image from a phone gallery in a React Native application. We will use react-native-image-picker to select the image and display it in our application. You can find the API reference for this package at the end of this article. Image: A basic React Native Image component for displaying the response image from the picker.

npx react - native init LocalImagePicker

cd LocalImagePicker
npm i react - native - image - picker

import React,{useState} from 'react';
import type {Node} from 'react';
import {
  Button,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Image
} from 'react-native';
  
import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
  
import { launchImageLibrary } from 'react-native-image-picker';
  
const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';
  
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  };
  
  const [pickerResponse, setPickerResponse] = useState(null);
  
  const openGallery = () => {
    const options = {
      selectionLimit: 1,
      mediaType: 'photo',
      includeBase64: false,
    };
    launchImageLibrary(options, setPickerResponse);
  };
  
  const uri = pickerResponse?.assets && pickerResponse.assets[0].uri;
  
  return (
    <SafeAreaView style={backgroundStyle}>
      <Button title="Pick from Gallery" onPress={openGallery} />
      {
        uri && (
          <Image source={{uri}} style=
            {{height:400, width:400,margin:20}}>
          </Image>
        )
      }
    </SafeAreaView>
  );
};
  
export default App;