We Keep Coding

image dont show up(react)

im trying to put an image in my page but it wont show up.even though there are no errors here is my code:
import React from "react";
import img1 from './images/earth-icon.png';
export default function Navbar() {
return(
<div className="header">
<h2 className="title">My Travel</h2>
<img src={img1} alt="cam" />
</div>
)
}
thank you!
i tried to put the image in the public folder and try it like this:
import React from "react";
export default function Navbar() {
return(
<div className="header">
<h2 className="title">My Travel</h2>
<img src="./images/earth-icon.png" alt="cam" />
</div>
)
}
but its the same result.

If you put the image directly into the public folder, then the path of the image changes.
So, if your image is placed like this:
- public
- earth-icon.png
// other folders like src etc.
Instead of
<img src="./images/earth-icon.png" />
try
<img src="/earth-icon.png" />
This url will get translated to https://example.com/earth-icon.png which will point to your public folder.
If you need the same folder structure with images etc. Ensure that the image is placed under a images folder inside public. The you would be able to do:
<img src="/images/earth-icon.png" />
Note that ./ points to the current directory whereas just / points to the public folder

i placed the images folder in the public folder and then i edited the code to be like this:
import React from "react";
export default function Navbar() {
return(
<h2 className="title">My Travel</h2>
<img src="/images/earth-icon.png" alt="" />
</div>
)
} but its the same result no image.

localhost server not displaying image (React)

I am learning react and following a series of challenges to do so. One such challenge has me create a React component that takes in properties. One of these properties is the name of a png file. I was not able to do this correctly but the correct line does not seem to be working.
This is an Ubuntu distro on WSL on a windows laptop.
I have done research on the topic the last few days and most response say to turn off adblocker (did not fix it), change file permissions (also did not work), turn off JS and CSS source maps (also did not work).
I noticed that a manually coded url to an image in the same folder was changed to
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgA…Cxd82/eqNyzDUJ0ohc8k/PbelTLtHJFgAAAAASUVORK5CYII=
My component is
import React from "react";
import star from "../images/star.png";
export default function Card(props) {
return (
<div className="card">
<div className="card--image">
<h3 className="card--availability">SOLD OUT</h3>
<img src={`../images/${props.img}`} alt="not working"></img>
</div>
<div className="card--rating">
<img src={star}></img>
<p className="card--dark-text">{props.rating}</p>
<p className="card--light-text">
({props.reviewCount}) · {props.country}
</p>
</div>
<p className="card--desc">{props.title}</p>
<div className="card--price">
<h5>From ${props.price}</h5>
</div>
</div>
);
}
Which is used in
import React from "react";
import Navbar from "./components/navbar";
import Hero from "./components/hero";
import Card from "./components/card";
export default function App() {
return (
//<Hero />
<div>
<Navbar />
<Card
img="zeferes.png"
rating="5.0"
reviewCount={6}
country="USA"
title="Playing on the beach with me."
price={136}
/>
</div>
);
}
My file directory looks like
And every other property works.
The displayed screen right now is:
What is going wrong?
Thank you for any help.

import for the image file(zeferes.png) is missing in Card component.
importing image file in Card component should fix the issue.

React lazy load image in a component that is passed image source as a property

I have a React app created with create-react-app. It contains the standard src/ directory and I have created a src/assets/home/ directory where I have saved image files that I intend to use in my project. I am not sure how to get the image referencing correctly within components in my app.
I have the following component that I pass a set of properties whose path is src/scenes/Home/InfographicSection/InfographicBlock/InfographicBlock.js:
<InfographicBlock
title="Some Title"
description="some text"
imgPath="../../../../assets/home/home-logo.png"
/>
The InfographicBlock uses the library react-lazyload (https://www.npmjs.com/package/react-lazyload):
import React from 'react';
import LazyLoad from 'react-lazyload';
const InfographicBlock = (props) => (
<div className="infographic-block columns">
<LazyLoad height={200}>
<img src={require(`${props.imgPath}`)} alt="" />
</LazyLoad>
<div className="content-container column">
<h2 className="subtitle">{props.title}</h2>
<p>{props.description}</p>
</div>
</div>
);
export default InfographicBlock;
The image referencing works great if I add the string path directly to the image tag like so:
<img src={ require('../../../../assets/home/home-logo.png') } />
However seeing as this is a component, I want to pass in the property as a variable to reuse the component.
I have tried variations of this without success:
<img src={require(`${props.imgPath}`)} alt="" />
Any help is appreciated.

What i did was import the image first.
import product1 from './Images/female_sport3.jpg'
<ProductPage currency={currency} currencyRate={currencyRate} product1={product1}></ProductPage>
Inside ProductPage.js
const {currency, currencyRate, product1} = props
<img src={product1} alt=""></img>
This is the reference for import image: https://www.edwardbeazer.com/importing-images-with-react/

How to load and display an image using react functions (not class)?

I am new to react.js and JS in general.
I am looking for an example of code that:
uses react functions, not classes.
let the user upload an image using
then display that image on the screen
Thanks in advance.

First image should copy in to project path and import that into your page
import img from "../../assets/img/logo.svg";
render() {
return (
<div className="content" >
<img id="logo-img" src={img} alt="logo" />
</div>
)
}

React dynamic mapping image paths from json

I have a list of captions displayed from json. I would like to also map the location to local images / or urls in that same json data. So that each iteration of displayed item has its own images included.
The problem is with require js which seems to be working only when im passing into it actual string with location of image. If im trying to pass a reference to node in json that holds the location of that image it does not work.
note: some html tags are from materialize.
Does work:
const imgPath= require("../images/img1.jpg");
<img src={ imgPath } alt=""/>
Does not work:
const imgPath= require({row.img});
<img src={ imgPath } alt=""/>
{row.img} is key from json. Is there any way to map image locations like that in json and then use it to display it dynamicly rather than map entire list in static way?
{
"title":"title caption",
"note":"Lorem ipsum dolor sit amet....",
"img":"../images/img1.jpg",
"iconType":""
}
rendered component: this is how i would like it to work:
render() {
let rows = dataJson.map(function(row){
return <CollapsibleItem header={row.title} icon={row.iconType}>
<div>{row.note}</div>
<img src={ row.img } alt=""/>
</CollapsibleItem>
})
return (
<div className="container">
<div>
<Collapsible>
{rows}
</Collapsible>
</div>
</div>
);
}
If i import image to the component in static way it does work as well:
import img01 from "../images/img1.jpg";
and replace {row.img} with {img01}
<img src={ img01 } alt=""/>
is it possible? i found some examples of importing bunch of images from directory using webpack, but here the difference is that i want to have the paths to images mapped inside of my json, so that i can add images into specific list's item accordingly.
Thank You for any thoughts.