Use image in React

1

Hi,

I try to import images into app but it does not show up.

ImageLoader.js

const images = [
  {
    src: './Assets/laszlo_varga.jpg',
  },
];

function ImageLoader() {
  return images;
}

export default ImageLoader;

Description.js

import React, { Fragment, useEffect } from 'react';
import ImageLoader from './ImageLoader';

export default function Description() {
  const imageArray = ImageLoader();

  return (
    <Fragment>
      <p>My name is LV</p>
      <img src={imageArray[0].src} alt="me" />
    </Fragment>
  );
}

I have tried this solution

Here is Developer tools output

<div tabindex="-1" style="outline: none;">
    <p>My name is LV</p>
    <img src="./Assets/lv.jpg" alt="me">
</div>

No error that image not found.

I am out of ideas.

Thank you for any help

2

Try using require to load local images. I think the following should work

<img ‘src={require(imageArray[0].src)}’ alt=“me” />

Remove the single quotes around src, I had to add them because otherwise it was been considered as an image html tag by the browser and the browser was trying to load image.

3

how it is possible that Developer tools output src="./Assets/lv.jpg"

because you gave src: './Assets/laszlo_varga.jpg' in images i.e.

const images = [
  {
    src: './Assets/laszlo_varga.jpg',
  },
];
4

It says Cannot find module './Assets/lv.jpg'

5

You are right. It was my mistake but the problem is still exist.

6

I followed this description and this way works.
With the other solution that is not working there must be problem with the ‘PATH’
I’ll be back later when I found out.

7

For the code in the thread you linked to, I’m not really sure how it would work. Maybe I missed something but I thought relative paths didn’t work with create-react-app/webpack. It would work if you added the Assets folder with the images inside the public folder but I didn’t see that mentioned in the thread.

I believe you can also do this. But I’m not sure if it’s a good idea.

<img src={require(`${imageArray[0].src}`)} alt="me" />

Maybe @DanCouper can give some clarification on the code posted in the thread you linked to.

8

I think at first glance it’s because the images aren’t in public. If you’re using Create React App @Lacika1981 then does your directory structure look a bit like this (very simplified, but in your project you have a source folder with all the code in, and Assets is a folder in there):

my-app
|_ public
    |_ ReactLogo.svg
|_ src
    |_ SomeComponent.js
    |_ AnotherComponent.js
    |_ Assets
        |_ example.jpg

Cos this ain’t gonna work if that’s the case. Assets needs to a folder to be in the public folder – in my post I just used that file path as an example, in reality any static assets need to sit in public because they aren’t code, they need to be available to the app when the code is compiled

9

@lasjorg, @DanCouper

I am not using the create react app. However I am moving that way now to sort this problem.
I am using custom settings but my knowledge is not enough yet to solve this issue.

Thank you for the help to everyone.