React - Assets
Assets are non-JavaScript resources used by a React app, such as images, stylesheets, fonts, icons, and media files. They are typically loaded by the browser and bundled during the build process.
Common Types of Assets in React
1. Image Assets
Image assets are used for logos, icons, banners, and illustrations.
Examples: “.png”, “.jpg”, “.jpeg”, “.svg”, “.webp”
Usage:
import logo from “./assets/logo.png”;
function Header() {
return <img src={logo} alt=”App Logo” />;
}
2. CSS and Styling Assets
CSS and Styling assets used to style components and layouts.
Examples: CSS files (`.css`), SCSS/SASS (`.scss`), CSS Modules, Utility CSS files (Tailwind),
Usage:
import ‘./App.css’;
3. Font Assets
Custom fonts used for typography.
Examples: “.woff”, “.woff2”, “.ttf”, “.otf”
Usage:
@font-face {
font-family: “Roboto”;
src: url(“./assets/fonts/roboto.woff2”);
}
4. Media Assets
Audio and video files used in the application.
Examples: “.mp3”, “.wav” , “.mp4”, “.webm”
Usage:
import introVideo from “./assets/intro.mp4”;
<video src={introVideo} controls />
5. Icons and SVGs
Icons can be used as image sources or as React components.
Usage as component:
import { ReactComponent as Logo } from “./assets/logo.svg”;
<Logo />
Where Are Assets Stored in a React Project?
1. src Folder
Assets inside ‘src’ are processed by the build system (Webpack/Vite).
Example structure:
src/assets/images/
src/assets/fonts/
src/assets/videos/
2. public Folder
Assets placed in public are served as is.
Usage:
<img src=”/logo.png” alt=”Logo” />
The general rule for asset storage is that if your app can compile without it, you can keep it in the public folder. For instance, logo is in the public folder because no component depends on it. In other words, React doesn’t need to use the logo file to compile all the components into an app that will get served in your local browser while you’re building your app.
How to Use Image Assets
There are three different ways to display images in a React application.
1. Importing the image using the “import” statement
2. Loading the image using the “require()” function
3. Displaying an image using an external image URL
Project Setup for Embedded Assets
Inside the “src” folder of the React project, an “assets” directory is created. Within this folder, an “images” subfolder contains a JPEG image named “imageexample.jpg”.
Method 1: Displaying an Image Using the “import” Statement
The first and most commonly recommended approach is to import the image at the top of the component file.
Step 1: Import the Image
A name is assigned to the imported image, followed by a relative path to the file:
import imageexample from ‘./assets/images/imageexample.jpg’;
Step 2: Render the Image
The image is rendered using an “<img>” tag. The “src” attribute is set to the imported variable, and the height is restricted to 200 pixels.
<img src={imageexample} height=”200″ alt=”Image Example” />
Method 2: Displaying an Image Using the “require()” Function
The second approach uses the “require()” function directly inside the JSX, without importing the image at the top of the file.
Example:
<img
src={require(“./assets/images/imageexample.jpg”)}
height=”200″
alt=”Image Example 2″
/>
In this case, the file path is passed as a string to the “require()” function.
After saving the file, the second image is displayed successfully.
Difference from the import method
- No explicit import statement is required
- The image path is resolved at runtime
Method 3: Displaying an Image Using an External URL
The third method involves loading an image hosted on the internet instead of using a local file.
Step 1: Define the Image URL
A variable is created to store the image URL:
const randomImageUrl = “https://somesourcesite.com/random/400×200”;
Step 2: Render the Image
The variable is then used as the “src” value in the image element:
<img src={randomImageUrl} height=”200″ alt=”Random online image” />
This displays a random image fetched from an external photo hosting service.
When to use this method
- When images are hosted on a CDN or third-party service
- When you have dynamic or frequently changing images
How to Use Video Assets
1. Loading a Local Video Asset Using HTML5
This is the simplest and most commonly used approach for local video files.
Step 1: Project Structure
src/assets/videos/sample.mp4
Step 2: Import and Use the Video
import sampleVideo from ‘./assets/videos/sample.mp4’;
function App() {
return (
<div>
<h2>Local Video Example</h2>
<video
src={sampleVideo}
width=”400″
controls
/>
</div>
);
}
export default App;
Following are the key points
- ‘controls’ enables play, pause, volume, etc.
- Video is bundled and optimized by Webpack
- Best for locally hosted media
2. Loading a Local Video Without Import (Using ‘require()’)
This approach avoids importing the asset at the top of the file.
function App() {
return (
<div>
<h2>Video Using require()</h2>
<video
src={require(‘./assets/videos/sample.mp4’)}
width=”400″
controls
/>
</div>
);
}
export default App;
When to use this method
- Useful for quick experiments
- It is less common in modern React projects
3. Using a Third-Party NPM Package: ”react-player’
This is the most flexible and professional solution for handling multiple video sources.
Step 1: Install the Package
Go to the terminal and type
npm install react-player
Step 2: Use React Player
import ReactPlayer from ‘react-player’;
function App() {
return (
<div>
<h2>React Player Example</h2>
<ReactPlayer
url=”https://www.youtube.com/watch?v=dQw4w9WgXcQ”
controls
width=”400px”
/>
</div>
);
}
export default App;
Why React Player Is Popular
- Supports YouTube, Vimeo, Facebook, SoundCloud, and more
- Handles embeds internally
- Consistent API across platforms
How to Use Audeo Assets
1.Using Local Audio File Example
import audioFile from ‘./assets/audio/sample.mp3’;
function AudioPlayer() {
return (
<div>
<h2>Audio Example</h2>
<audio src={audioFile} controls />
</div>
);
}
export default AudioPlayer;
2. Using External Audio URL
<audio
src=”https://www.example.com/audio/sample.mp3″
controls
/>