Javascript - Image is not shown from functional component to class component in React.js

Mixage
April 30, 2023
353 views
2 votes
4 Answers

My button.png file is in the public folder.

HelloButton.js in src/components:

import React from "react";

function HelloButton() {
  return (
    <a href="">
      <img
        style={{ height: "50px" }}
        alt=""
        src="/button.png"
      />
    </a>
  );
}

export default HelloButton;

Header.js in src/components:

import React, { Component } from "react";
import HelloButton from "./HelloButton";

export default class Header extends Component {
  render() {
    return (
     <div>
       <HelloButton />
     </div>
    );
  }
}

Even though there are no errors, but the image is not visible in the result.

Answers

Chosen as BEST ANSWER
- Mixage
- April 30, 2023 at 5:27 pm
- 0 votes
0
Thanks for answers which helped me

Solution was moving button.png file from public folder to src/images

and edited HelloButton.js to
```
import React from "react";
import button from "../images/button.png"

function HelloButton() {
  return (
    <a href="">
      <img
        style={{ height: "50px" }}
        alt=""
        src={button}
      />
    </a>
  );
}

export default HelloButton;
```

(Edit)

- Hitheshk
- April 30, 2023 at 5:05 pm
- 0 votes
0
This is the right way to import image in src
```
import React from "react";
import BUTTON fro "./button.png" // correct absolute path

function HelloButton() {
  return (
    <a href="">
      <img
        style={{ height: "50px" }}
        alt=""
        src={BUTTON}
      />
    </a>
  );
}

export default HelloButton;
```
Login or Signup to reply.

- PooyaAfshari
- April 30, 2023 at 5:08 pm
- 0 votes
0
The reason why the image is not showing up might be because of the incorrect path that is being used to access the image in the HelloButton component. Since you are trying to access the button.png file from the public folder, you need to use the absolute path for the image.

Change the code for the HelloButton component like below, here process.env.PUBLIC_URL mentions the absolute path to the public folder:
```
import React from "react";

function HelloButton() {
  return (
    <a href="">
      <img
        style={{ height: "50px" }}
        alt=""
        src={process.env.PUBLIC_URL + "/button.png"}
      />
    </a>
  );
}

export default HelloButton;
```
also as @Hithesh k mentioned make sure to use right way of import image in react
Login or Signup to reply.