Reactjs don't render a local image

Question

I'm trying to load a image in my next.js project, however i'm using the native from react. The image is not loading in the page, so i'll be linkin my two js files (styles and the component) bellow. I hope you can help me

import {Container, ProfileImage, Text} from './styles'

export default function Profile() {
    return (
        <Container>
            <ProfileImage 
                src="../../../public/images/profile.png"
            />
        </Container>
    )
}

import styled from 'styled-components'

export const Container = styled.div`
    display:flex;
    align-items:center;
    align-items:center;
    flex-direction:column;
`

export const ProfileImage = styled.img`
    border-radius:50%;
    width:300px;
    height:300px;
    border: 1px, black;
`

EDIT: The full code is in: https://github.com/FranciscoJLucca/franciscolucca.github.io

Does this answer your question? [https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react](https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react) — rezso.dev, Mar 12 '21 at 00:28
@rezso.dev not actually, when I try anyone of the ways in this answer I get a error, like: `./public/images/profile.png 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See webpack.js.org/concepts#loaders (Source code omitted for this binary file)` — TheOneFromBrazil, Mar 12 '21 at 00:43

score 1 · Answer 1 · answered Mar 12 '21 at 01:00

1

I recommend importing the image as a component then calling it in your function. I had a similar issue in the past and that solved my problem! Example:

import {yourImage} from "../yourfolder/Image.png"
export default function Profile() {
return (
 <img src={yourImage}></img>
  )

answered Mar 12 '21 at 01:00

llamingo

77
8

That's odd. Have you made sure your path is correct? I do know this is a common mistake that can occur sometimes. I'll also take a look at you repo! :) – llamingo Mar 12 '21 at 01:18

score 1 · Accepted Answer · answered Mar 12 '21 at 13:13

Thanks to everyone who tried to help, but I found out what was going on. By default, Next.js only loads images that are inside the /public folder and in order for it to recognize other paths, a library had to be added, next-image, I also had to create a configuration file for next.js, the next.config.js which follows below.

const withImages = require ('next-images')
module.exports = withImages ({
    esModule: true,
})

I get this information in next.js image optimization

rezso.dev · Answer 3 · 2021-03-12T01:51:33.137

0

UPDATE: I took a look at the repo, two things you have to fix:

Fix typo: styled.image -> styled.img
Use absolute path excluding public directory: src='/images/Profile.png'

Old answer: You might need to configure a loader for webpack. I suggest url-loader, there is a handy guide in the accepted answer here: IMAGE: You may need an appropriate loader to handle this file type

edited Mar 12 '21 at 01:51

answered Mar 12 '21 at 00:47

rezso.dev

431
2
7

Unfortunately it dosent work , I really dont know what is happening, it is blowing my mind hahaha – TheOneFromBrazil Mar 12 '21 at 01:06
Have you tried a minimal example with another image? – rezso.dev Mar 12 '21 at 01:07
Yes, I tried with some google images and diferentes extensions and wont work – TheOneFromBrazil Mar 12 '21 at 01:10
OK, I see you have edited your question and added a repo link. Let me take a look at it. We are gonna solve this :) – rezso.dev Mar 12 '21 at 01:11

score 0 · Answer 4 · answered Mar 12 '21 at 01:22

0

The src should be like this.

                src="/images/profile.png"

Just don't use exact path ../../public. It won't work.

answered Mar 12 '21 at 01:22

hotcakedev

2,194
1
25
47

score 0 · Answer 5 · edited Mar 12 '21 at 11:28

0

Please Import your image like this.

import {youjsrImage} from "/sourceDirectory";

then use the code in render function like :

<img src={yourImage}></img>

edited Mar 12 '21 at 11:28

Mario Petrovic

7,500
14
42
62

answered Mar 12 '21 at 11:21

Rahulvignesh

1
1

Reactjs don't render a local image

5 Answers5