We Keep Coding

My Image is not rendering in reactjs typescript

I'm creating an app using **reactjs **and **typescript **however I encountered an issue while loading **images **inside a component.
My error in console
Uncaught Error: Cannot find module '../images/test.png'
at webpackEmptyContext...
This is my component:
import { IProject } from '../interfaces/IProject'
import pin from '../svgs/pin.svg'
function Project(props: { project: IProject }) {
const project = props.project
return (
<>
<div className='project'>
<img className='pin' src={pin} alt='pin' />
<div>
<img alt='project gif' src={require(project.image)} />
<span>{project.title}</span>
</div>
</div>
</>
)
}
export default Project
NB : The images are stored inside a 'images' folder and the project component is stored inside a 'components' folder
**NB#2 : **the first image 'pin' loads normally.
Thank you for all the help ~ sorry if this a nooby question.
I tried
replacing (project.image) with ('../images/test.png') and it works if I do that but I want to be able to display the image src passed by the props.
for testing purposes, I added a const projectImage = '../images/test.png and replacing require(project.image) with require(projectImage) and it doesn't work
I created index.d.ts file (according to solutions I found on the internet) and added declare module '*.jpg' and the same thing for jpeg and png. It didn't fix my issue
changing the path of the image
I also installed file-loader

update variable value to contain only the name like this
project.image = 'test.png'
then add the relative path
require(`../images/${project.image}`)

Why are my React image imports not working?

PLEASE SEE UPDATE BELOW
This is my first time posting on stack overflow because usually I can find answers but I simply can't this time. I'm using React for the first time in a few months and just trying to show some images on the page. The imports are not working at all.
Here is where I put them
filestructure
I created an index.js inside in order to export all of them at once:
const images =
{
image1: require("./001.jpg").default,
image2: require("./002.jpg").default,
image3: require("./003.jpg").default,
image4: require("./004.jpg").default,
image5: require("./005.jpg").default,
image6: require("./006.jpg").default,
image7: require("./007.jpg").default,
image8: require("./008.jpg").default,
image9: require("./009.jpg").default
}
export default images;
I also tried similar things with an array (which is what I wanted) and with ES6 imports in case that was the issue.
I then have attempted to use them here:
import React from 'react'
import images from "../photos/index.js"
import Photo from "./Photo";
function PhotoList() {
const photoComponents = Object.values(images).map(
image => {
return <Photo photo={image}/>
}
)
return(
<div>
{photoComponents}
</div>
)
}
export default PhotoList
I have also tried to display just a single image using directly here and that also is broken, so it's not the Photo component that's broken, and apparently not the mapping either. It's just the imports.
And here we have the page. Everything else shows:
import React from 'react'
import Navbar from './Navbar';
import "./main.css";
import PhotoList from "./Photo";
function mainPage() {
return (
<div className="mainPage">
<h1>Jei Ganiyeva</h1>
<Navbar/>
<PhotoList/>
</div>
)
}
export default mainPage;
And it shows up like this:
broken image on site
What is up with this? I can't seem to find any answers apart from people importing things wrong which I am not doing. Well, I assume I'm doing something wrong, but not in the way they are.
Thank you in advance for your help.
UPDATE:
It appears the Photo component is not receiving any props no matter what it is. See here, I have replaced the mapping with passing a simple integer variable and simply showing it as a h1 in Photo:
import React from 'react'
import {images} from "../resources/photoInfo.js"
import Photo from "./Photo";
function PhotoList() {
// const photoComponents = images
// .map(image => {
// return(
// <Photo className="photo" source={image}/>
// )
// });
const image = 100;
return <div><Photo source={image}/></div>
}
export default PhotoList
import React from 'react'
function Photo({source}) {
return (
<div>
<h1>{`The props are ${source}`}</h1>
</div>
)
}
export default Photo
This results in the following screen:

Okay, I have found the solution to this and am answering myself just for a reference for anyone who googles this. However, I doubt anyone will have exactly the same problem.
Basically, in the main page, you can see above that I'm actually importing PhotoList from "./Photo" not "./PhotoList" as intended. This means that the logic held within PhotoList that passed the props to Photo was not being used. This also explains why I never saw anything in the console when I tried to console.log from PhotoList. So, if anyone else does have a mystery problem like this, check whether all parts of your code are being reached at all!

Rendering image in react component

I am having an issue to render my images from my './src/img' file and have no idea where i'm going wrong...
I have an object which have a key 'image' which return the file name (ie: 'filename.jpg'). As stated before, the images are stored in an 'img' folder in the 'src' one.
in my component, i return the image like this :
<div className='image'>
<img src={require(`../img/${details.image}`)} alt={details.name} />
{
console.log(details.image)
}
</div>
i use the require function as i'm supposed to, (i think ?!^^) and indicates the folder and retrieve the image name with $(details.image).
As you can see i'm doing a console.log of details image which returns me the filenames without fail.
When i go into the console and check the rendering, i have no issue with the alt, but the src param gives me [object Module]
And that's where i'm kind of lost as to what happens and what i did wrong there.
Thanks by advance

instead of the require module, try importing the image as suggested by creat-react-app docs.
import logo from './logo.jpeg';
import React from 'react';
import logo from './logo.png'; // <<<< image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />; // <<<<<< Adding to src attribute.
}
export default Header;

React Native, how to add a variable inside image link with require function

I stored images locally in project folder, and I want to add a variable (nature.png) inside image source (with require), so I did like this
let i = 'natrue';
let imagePath = require('../asset/gallery/image/');
return (
<View >
<Image source={{imagePath} + i + '.png'}/>
</View>
But I got an error:
text string must be rendered within a text component
And I dont want to do like this (Works fine) because I have more than 100 images:
<Image source={require('../asset/gallery/image/nature.png')} />

Unfournately requirejs module doesn't work that way
You'll have to create strings completely or create a object which will map a key to image. Also that is a best practice to follow.
you can create a file called image.js and export all your images from there,
for example
// image.js
const BASE_URL = "../asset/gallery/image/";
export default {
nature:require(`${BASE_URL}nature.png`),
}
and in your components,
import Images from "src/images";
...
<>
<Image src={Images.nature}/>
</>
...

importing images locally in react

I am not understanding how import works in React. I'm currently using create-react-app. I have a folder inside components folder named images:
- src
- components
- images
Insides the components folder I also have a js file named ProductSquare.js.
I am trying to import a picture from images folder using this line
import bumper from './images/bumper1.png';
I have tried changing it to only bumper1.png and many other options. What am I doing wrong here? ( would appreciate a better way to do it in the future).
Is this how programmers import pictures in the real world?

Try using <img src={require('./images/bumper1.png')} />
P.S.
The similar question goes here

If you are using something like Webpack (which create-react-app does) then yes, you can just import the images (and most other file types). They end up getting converted into something (I believe images end up as a data URL).
If your folder structure looks like this:
src
components
ProductSquare.js
images
Then you should be able to use the image like this:
// in ProductSquare.js
import React from 'react';
import bumper from './images/bumper1.png';
class ProductSquare extends React.Component {
render() {
return <img src={ bumper } />;
}
}
If it isn't, double-check that all of the files are named what you think they should be (check for typos and what not).
If everything is correct and it isn't working, try just adding console.log(bumper) before the class. Then:
if it outputs a string that looks like data:blahblah it should work
if it outputs undefined, the image may not be named properly
if it doesn't output, you might not be using ProductSquare correctly

Using the public Folder
Note: this feature is available with react-scripts#0.5.0 and higher.
Create a folder in public folder, for example, 'image', add your photos there.
After that wherever you want you can use image address like this:
<img className="img1" src="/image/pic.jpg" alt=""/>

You Need to use .default after require
<img src={require('./images/bumper1.png').default} />