Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Problem accessing my icon/image files in my React app's folders

image fo my code
I am trying to access and render an image or icon in my folders, but it only renders a question mark onto the page.

In previous projects I had used exactly same routes to a folder placed in the exact same way and it had worked fine.

Does anyone know what could be my issue? Am I maybe structuring my other folders in a wrong way and the project can not access the actual image files..?

I ran into this issue with my other React projects as well lately and had to use url links to images instead, or import the image separately at the top of the component, but in my previous React projects I had not needed to do that, but simply accessed images in my folder by the path

I really appreciate if someone can advice me!

Tags:

2

Answers


  1. 0

    If you are using create-react-app, vite or other framework like that, you should either pass a relative path to a image file that is not on the public page or use an absolute path starting on the public page. If you use the dot in the beggining of the path, react thinks this is a relative path and don’t find the image file. In your case, just removing the dot should do the trick

    <img src='/assets/iconfb.png' />
    Login or Signup to reply.
  2. 0

    The period in front of ./assets indicates that it’s relative to your component. The public folder is placed at the root of your app, so if your app runs at www.google.com, assets are available at www.google.com/assets. The way you pass that into an image component is as /assets/....

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search