ReactJS 和公共文件夹中的图像

Question

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:

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:

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

Thanks

Answer 1

You don't need any webpack configuration for this..

In your component just give image path. By default react will know its in public directory.

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

Answer 2

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'} />

Answer 3

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'} />;

Answer 4

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}/>

Answer 5

在公共 ex.Assets 中创建一个文件夹并将您的图像放在该文件夹中并在 src 中分配 folder_name / image_name

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

Answer 6

The react components in the components folder have no notion of the public directory. As a result something like './images...' will not work. Rather in your button component have an import like this:

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

This is the preferred way of importing static resources into a react component. And you can make use of this import like so:

<Button srcAsProp={myImage}/>

or simply:

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

Answer 7

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"

Answer 8

Simply Use

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

React will automatically point toward the public directory

Answer 9

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> 

Answer 10

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

3. 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" />

Answer 11

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

Answer 12

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/ .

Answer 13

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.

Answer 14

你也可以使用这个..假设'yourimage.jpg'在你的公共文件夹中。

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