How To Upload A Picture Into Your Asset Folder In React App

React Image src

Created: October-26, 2021 | Updated: January-24, 2022

Reference a Local Image in React Using the create-react-app Packet
Load an Image Using the import Argument in React
Load an Image Using the crave() Method in React
How import and require() Work in React

If y'all're new to React, you have probably noticed that React uses HTML-like syntax called JSX. This syntax provides a unproblematic way to write React applications. When information technology comes to including images in the app, things get a little dingy. Unlike HTML, React code goes through many changes before beingness shown to the users.

When switching from development to production mode, the relative location of images might alter. Y'all demand a reliable way to import and include images in your React components.

Reference a Local Paradigm in React Using the `create-react-app` Bundle

When developing a React application, you lot can easily include an epitome as long as your development environment includes webpack. When using the create-react-app package, webpack is automatically included.

The element tag in JSX works the aforementioned way as in HTML - information technology is a self-closing img tag. Developers tin use the src attribute to specify the path. In this example, the <img/> element uses hard-coded image URL as a source:

              class App extends Component {   render() {     return <img src="https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg"/>   } }

If you lot want to specify a relative path to image location within the binder, things get a fiddling more complicated. Providing a source for an image is not as unproblematic as setting the src attribute equal to a relative file path on the reckoner. First of all, sandboxed browsers can not access your computer'due south src relative file path. You peculiarly tin't rely on local pathname once the application is deployed. Instead, developers must utilize either import or require() statements to load the image.

When developing a create-react-app projection, it is a practiced exercise to have an assets folder to store all your images. Unremarkably, this folder is created in the src folder of your project. Assuming that you follow this convention for storing the images, let's await at how you'd import and use images every bit a value for the src attribute.

Load an Image Using the `import` Statement in React

You can also use import statement to load an epitome. It looks straightforward and accomplishes the aforementioned goal as hard-coded url:

              import React, { Component } from "react"; import epitome from "./assets/true cat.jpg"; export default class testComponent extends Component {   render() {     render (       <div>         <img src={prototype} />       </div>     );   } }

As long equally you provide a valid path, your create-react-app should brandish an image.

react img src

In this case, the path works because both testComponent and assets folders are located in the src folder. The ending of the path - true cat.jpg is just a name of the individual file.

import argument provides an boosted benefit of storing the imported nugget in a variable. When setting a value to the src attribute, you can reference the variable name from the import statement.

You can read more than virtually import here.

Load an Epitome Using the `require()` Method in React

React developers employ the crave() method to load various types of modules. It can be used for loading images besides.

If you want to use it within JSX, the require() method must be placed between curly braces. As y'all may know, the code between curly braces is interpreted as valid JavaScript in JSX.

              <img src={require("./assets/cat.jpg").default} />

The require() method takes i argument, a valid relative path to an image. Also, annotation that you must access the .default property of the returned object in some browsers.

Alternatively, you tin create an epitome variable to store your image, and so reference it in your component. Hither's an example:

              const image = crave("./assets/cat.jpg").default; consign default form testComponent extends Component {   return() {     return (       <div>         <img src={paradigm} />       </div>     );   } }

Y'all tin can name the variable anything you lot want. It doesn't have to be called paradigm.

Think that if you want to reference a JavaScript variable in React, you must wrap information technology in curly braces.

There is no difference between the require() method and the import statement regarding performance.

How `import` and `require()` Piece of work in React

Some React developers might find information technology surprising that webpack (and other bundlers) handle image loading, not JavaScript or React.

When you load an epitome in a component, the bundler internally records the clan betwixt the component and the epitome. After, it will source the nugget, copy it, give it a unique proper noun and identify it in the accessible directory on the server.

Write for us

DelftStack articles are written by software geeks like y'all. If y'all likewise would similar to contribute to DelftStack past writing paid articles, y'all can cheque the write for us page.