I can't figure how to load an image from a project folder to use as a Chakra-UI Avatar. The src attribute seems to only be able to take external links. The component file I'm working on is located in the src/Components/ folder, the image I want to load is in the src/images folder. Why doesn't this render my avatar, and is there a way to make it work?

<Avatar src={"../images/logo.png"} alt={"Logo"} size={2}></Avatar>

CodePudding user response：

I assume you are using react, generally in React you can add images with two methods. You can click here to view more information.

import logo from '../images/logo.png';
<Avatar src={logo} alt={"Logo"} size={2}/>

The other method is to serve the files through the "public" folder and link it in your component. https://create-react-app.dev/docs/using-the-public-folder/