1

I have this component called SearchBarScreen :

import React, { useEffect } from "react";
import "./index.scss";
export const SearchBarScreen = (props) => {
  return (
    <>
      <img src="./assets/img/logo.png" className="nav_logo" alt="logo mercadolibre" />
    </>
  );
};

and my project has this structure:

enter image description here

depending on where I call this component, the image can be broken.

for example in the previous image it can be seen under the folder src/components/items/components, where it is called SearchBarScreen. For example, the image is shown broken on ItemDetailScreen but not on ItemScreen.

I always call it the same way in both components:

return (
  <>
    <SearchBarScreen props={props} />
  </>
);

In ItemDetailScreen

enter image description here

In ItemDetailScreen

enter image description here

yavg
  • 2,761
  • 7
  • 45
  • 115

1 Answers1

1

If you want the image loading to consistently work, you'll need to import the Image as if it was a component instead of the style you generally use with standard HTML.

Like so:

import React, { useEffect } from "react";
import Logo from '../path/to/image';
import "./index.scss";

export const SearchBarScreen = (props) => {
  return (
    <>
      <img src={Logo} className="nav_logo" alt="logomercadolibre" />
    </>
  );
};

Edit: If you absolutely have to use the public folder, which I don't recommend, here's how you do it: https://create-react-app.dev/docs/using-the-public-folder/

You'd basically make the path absolute instead of relative.

References:

Luis Osta
  • 144
  • 1
  • 13
  • thanks man!. `../path/to/image` in my case is `./assets/img/logo.png` Can you please see in the image that I uploaded of my structure, which is the correct route? I am getting a "cant resolve" (the component is `SearchBarScreen` and the src was ` – yavg Mar 08 '21 at 14:25
  • Yeah I've seen it. Is there a reason why you can't import the image and then put that as the source? Like is there a reason you need to use the public folder – Luis Osta Mar 08 '21 at 14:28
  • I am new, I have seen courses and examples and the image is always in the public folder, I want to do what works for me. I do not know what to do? – yavg Mar 08 '21 at 14:30
  • or where should I put the image? – yavg Mar 08 '21 at 14:31
  • If you want to use the public folder, use an absolute math instead of a relative one. So it'd be '/assets/img/logo.png' instead of './assets/img/logo.png. Does that work? – Luis Osta Mar 08 '21 at 14:33
  • Also itd be great if you could make a Codesandbox here - https://codesandbox.io/s/ if that doesn't work. Basically make the simplest replication of the issue you're having – Luis Osta Mar 08 '21 at 14:34
  • excuse my ignorance and I hope not to bother you, I want to learn. My image is in the `public` folder, what is wrong with the path that I put doing what you tell me? `import Logo from" ./assets/img/logo.png ";` – yavg Mar 08 '21 at 14:34
  • Ah okay I see, so you can't import things outside of the 'src' folder. So if you want to import you'll have to move the logo to somewhere in your folder. Then it should work – Luis Osta Mar 08 '21 at 14:35
  • This works! So is it good practice to save my images inside the "src" folder? – yavg Mar 08 '21 at 14:38
  • Glad it does! Generally speaking most of your images should probably be within the src folder. Here's a document explaining when to use the public folder - https://create-react-app.dev/docs/using-the-public-folder/#when-to-use-the-public-folder – Luis Osta Mar 08 '21 at 14:39
  • If this solves your problem, just mark my answer as the solution in case someone else runs into it – Luis Osta Mar 08 '21 at 14:39