CODEWITHSUNDEEP
javascriptreactjs
Aceconhielo
Aceconhielo

Reputation: 3636

ReactJS and images in public folder

Im new in ReactJS and I want to import images in a component. These images are inside of the public folder and I do not know how to access the folder from the react component.

Any ideas ?

EDIT

I want to import an image inside Bottom.js or Header.js

The structure folder is:

enter image description here

I do not use webpack. Should I ?

Edit 2

I want to use webpack for loading the images and the rest of assets. So in my config folder I have the next files:

enter image description here

Where I need to add the paths of the images and how?

Thanks

Upvotes: 259

Views: 613864

Answers (18)

Mercy
Mercy

Reputation: 1

If you have a image folder img_folder in public folder and you wanted to access images in it from your react component Home.jsx or Home.css

src/component/Home.jsx/Home.css

You can access it by giving the path as given below: /public/img_folder/my_image.jpg

Upvotes: 0

Anas
Anas

Reputation: 1845

I didn't see any answer talk about import the logo using import.

Here is how to import it in Vite React 18^ or higher

import logo from "/logo.png"

Notice that I'm importing from public folder without the dot e.g. ❌"./logo.png" ✅"/logo.png"

And then:-

<img src={logo} alt="Logo" />

Upvotes: 0

Jammar
Jammar

Reputation: 456

I was looking for an answer on how to find the files put inside the public folder since I couldn't find them in the web tools/sources tab.

I tried appurl.com/public/examplefile.css but it turned out they are simply put here: appurl.com/examplefile.css

Upvotes: 0

twinklecube
twinklecube

Reputation: 94

This is quite an old question. But anyone who needs a solution, please read.

If you are creating a react app from the scratch, without using npx create-react-app the following solution will work.

webpack: 5.75.0
node: 14.15.0
react: 18.2

  1. First place your image file in the project, may be in the public folder.
    eg. /public/assets/my-image.jpg

  2. install copy-webpack-plugin.

    npm i -D copy-webpack-plugin

    (my version is 11.0.0)

  3. In the webpack config file import the copy-webpack-plugin.

    const CopyPlugin = require('copy-webpack-plugin');

  4. In the plugins section of the webpack config file, configure like below.

    plugins: [
    new CopyPlugin({
        patterns: [
            {
                from: path.resolve(__dirname, 'public', 'assets'),
                to: path.join(__dirname, 'dist', 'images'),
                noErrorOnMissing: true
            }
        ]
    })
]

    What this piece of code does is that, webpack reads image files from public/assets folder and copy them in to the dist/images folder.... (I assume here that your build folder is called dist. otherwise, change accordingly )

  5. Then in your component just reference the image in html style

    <img src="/images/my-image.jpg" alt="my image" />

    Just note, that the image is referenced from the dist folder.

If you plan to reference this image in the future via an open repository, then this approch is more appropriate... because you just have to change the img src url.

Hope I helped someone :) Happy coding !!!

Upvotes: 3

Rahul Kumar RJ
Rahul Kumar RJ

Reputation: 1

Easy to Get Local Image Directory

<img className='img-fluid' src={/src/assets/${item?.['poster-image']} || '/src/assets/poster1.jpg'} alt={item?.['poster-image']} loading="lazy" />

https://i.sstatic.net/BQU6J.png

API Image to get the only name to search image name in the directory

"poster-image": "poster3.jpg"

https://i.sstatic.net/czpWe.png

Upvotes: 0

Bimal Grg
Bimal Grg

Reputation: 8166

You don't need any webpack configuration for this.

In your component just give image path. React will know its in public directory.

<img src="/image.jpg" alt="image" />

Upvotes: 438

Ubaid Ullah Noor
Ubaid Ullah Noor

Reputation: 1

if you want to add your javascript file from public folder to react, put specific file to index.html file in public folder. Your problem will be solve.

Upvotes: 0

Sandeep Rana
Sandeep Rana

Reputation: 309

Simply Use

<img src='/image.extension' />

React will automatically point toward the public directory

Upvotes: 6

Vikram Singh Shekhawat
Vikram Singh Shekhawat

Reputation: 55

Create a folder in public ex.Assets and put your image in that folder and assign the folder_name / image_name in src

<img src = "/Assets/cardimg.svg" alt="Card image cap" width="400" />

Upvotes: 5

Saif Ul Islam
Saif Ul Islam

Reputation: 374

A simple solution is to use paths like this /images/logoFooter.png. If the file is located directly under the public folder, do /someImage.png. You can go deeper, /x/y/z/image.png. Treat the locating part of the image as an absolute kind of location for that image.

For more information, check out https://create-react-app.dev/docs/using-the-public-folder/.

Upvotes: 0

vibhu
vibhu

Reputation: 379

here is sure and three simple way to do that...

  1. you can make one folder in directory and access it as we do import way or

  2. you can give direct image name in src

    <img src="image__name" alt="yourpic" />

//by default react look in public folder can render image in img tag

  1. const image = window.location.origin + "/image.png";

// if your image in public directory inside folder imagecollection than you can import it in this way

  const image = window.location.origin + "/imagecollection /image.png";
 <img src={image} alt="yourpic" />

Upvotes: 3

Sarthak Raval
Sarthak Raval

Reputation: 1291

Try This One its easy and Simple

  1. Don't Make Image folder in src.
  2. Make an image folder in public.
  3. you work in react-bootstrap install

npm install react-bootstrap

import React from 'react';
  
import 'bootstrap/dist/css/bootstrap.min.css';
import { Image } from 'react-bootstrap';
export default function Main() {
   
   return (
     <>
          <Image src="/img/image.jpg/100px250" alt="bg image"  fluid />
     </>
    )
 }

Hope it's Done

Upvotes: 1

smoothVibes
smoothVibes

Reputation: 1

You Could also use this.. it works assuming 'yourimage.jpg' is in your public folder.

<img src={'./yourimage.jpg'}/>

Upvotes: -3

Gerard
Gerard

Reputation: 2330

To reference images in public there are two ways I know how to do it straight forward. One is like above from Homam Bahrani.

using 

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} />

And since this works you really don't need anything else but, this also works...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

Upvotes: 205

Karthik Sagar
Karthik Sagar

Reputation: 444

We know React is SPA. Everything is rendered from the root component by expanding to appropriate HTML from JSX.

So it does not matter where you want to use the images. Best practice is to use an absolute path (with reference to public). Do not worry about relative paths.

In your case, this should work everywhere:

"./images/logofooter.png"

Upvotes: 4

Hom Bahrani
Hom Bahrani

Reputation: 3562

the react docs explain this nicely in the documentation, you have to use process.env.PUBLIC_URL with images placed in the public folder. See here for more info

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

Upvotes: 40

Hassan Ajaz
Hassan Ajaz

Reputation: 663

1- It's good if you use webpack for configurations but you can simply use image path and react will find out that that it's in public directory.

<img src="/image.jpg">

2- If you want to use webpack which is a standard practice in React. You can use these rules in your webpack.config.dev.js file.

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

then you can import image file in react components and use it.

import image from '../../public/images/logofooter.png'

<img src={image}/>

Upvotes: 10

Umesh
Umesh

Reputation: 2742

You should use webpack here to make your life easier. Add below rule in your config:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

After this, you can simply import the images into your react components:

import myImage from 'publicfolder/images/Image1.png'

Use myImage like below:

<div><img src={myImage}/></div>

or if the image is imported into local state of component

<div><img src={this.state.myImage}/></div>

Upvotes: 3

Related Questions