I have a React app but when I try and render a PNG file in the "src" folder, I get the following on the Google Chrome browser:
There is no Public folder in my project, so I am unable to place the image file there.
The following is my code when loading the image:
What can I do instead?
Many thanks!
You can solve that using 2 simple ways, one of them is to take the image address as a constant, the other one can be passing the address directly. To clarify the images cannot be outside(no absolute path) of your project, i.e. the direction to your image should be as follows
../splunk-logo.png
import "./styles.css";
const image = require("./Landscape.jpg");
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{/* One way */}
<img src={image} alt="Landscape img" height="200px" />
<br />
{/* Second way */}
<img src={require("./Landscape.jpg")} alt="Second Land" height="200px" />
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
Test Here
Related
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.
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.
Images not rendered when I use Brave browser but when I use other browsers i.e. Chrome, the images in my app are rendered.
as you can see in my code I created an object that handles all the images so that I can dynamically import those images in my components.
const Assets = {
logo: require('./logo.svg').default,
spots: require('./spots.svg').default,
};
export default Assets;
here is the component that imports some of those images:
import Assets from '../Assets/Index.js'
export default function ButtonAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="fixed">
<Toolbar variant='regular'>
<Button className='button-image__logo' variant="text">
<img src={Assets.logo} alt="logo" />
</Button>
<Button className='button-image__spot' >
<img src={Assets.spots} alt="car-spot" />
</Button>
<Button variant="text" color="primary" size='large'>Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
other stack overflow solutions say that I should reinstall webpack, this I have done but the problem still persists.
I have also tried clearing Brave's Cache, it does not change anything.
Is it a problem with Brave Browser or React itself and what can I do to fix this?
NB: I used yarn create react-app
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/
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>
)
}