CODEWITHSUNDEEP
javascriptreactjsnext.js
TheOneFromBrazil
TheOneFromBrazil

Reputation: 43

Reactjs don't render a local image

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

Upvotes: 0

Views: 1103

Answers (5)

TheOneFromBrazil
TheOneFromBrazil

Reputation: 43

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

Upvotes: 1

Rahulvignesh
Rahulvignesh

Reputation: 1

Please Import your image like this.

import {youjsrImage} from "/sourceDirectory";

then use the code in render function like :

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

Upvotes: 0

rezso.dev
rezso.dev

Reputation: 427

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

  1. Fix typo: styled.image -> styled.img
  2. 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

Upvotes: 0

hotcakedev
hotcakedev

Reputation: 2504

The src should be like this.

                src="/images/profile.png"

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

Upvotes: 0

llamingo
llamingo

Reputation: 77

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>
  )

Upvotes: 1

Related Questions