I have some problem with my images on my react project. Indeed I always thought that relative path into src attribute was built on the files architecture
Here my files architecture:
components
file1.jsx
file2.jsx
file3.jsx
container
img
js
...
However I realized that the path is built on the url. In one of my component (for example into file1.jsx) I have this:
localhost/details/2
<img src="../img/myImage.png" /> -> works
localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed
How is it possible to solve this problem? I want that in any form of routes handled by react-router, all images can be displayed with the same path.
In create-react-app relative paths for images don't seem to work. Instead, you can import an image:
import logo from './logo.png' // relative path to image
class Nav extends Component {
render() {
return (
<img src={logo} alt={"logo"}/>
)
}
}
If you used create-react-app to create your project then your public folder is accessible. So you need to add your image folder inside the public folder.
public/images/
<img src="/images/logo.png" />
You're using a relative url, which is relative to the current url, not the file system. You could resolve this by using absolute urls
<img src ="http://localhost:3000/details/img/myImage.png" />
But that's not great for when you deploy to www.my-domain.bike, or any other site. Better would be to use a url relative to the root directory of the site
<img src="/details/img/myImage.png" />
With create-react-app there is public folder (with index.html...).
If you place your "myImage.png" there, say under img sub-folder, then you can access them through:
<img src={window.location.origin + '/img/myImage.png'} />
If the image is placed inside the 'src' folder, use the following:
<img src={require('../logo.png')} alt="logo" className="brand-logo"/>
Make an images folder inside src(/src/images) And keep your image in it. Then import this image in your component(use your relative path). Like below-
import imageSrc from './images/image-name.jpg';
And then in your component.
<img title="my-img" src={imageSrc} alt="my-img" />
Another way is to keep images in public folder and import them using relative path. For this make an image folder in public folder and keep your image in it. And then in your component use it like below.
<img title="my-img" src='/images/my-image.jpg' alt="my-img" />
Both method work but first one is recommended because its cleaner way and images are handled by webpack during build time.
Some older answers din't work, others are good but won't explain the theme, in summary:
If image is in 'public' directory
Example: \public\charts\a.png
In html:
<img id="imglogo" src="/charts/logo.svg" />
In JavaScript:
Create image to new img, dynamically:
var img1 = document.createElement("img");
img1.src = 'charts/a.png';
Set image to existing img with id as 'img1', dynamically:
document.getElementById('img1').src = 'charts/a.png';
If image is in 'src' directory:
Example: \src\logo.svg
In JavaScript:
import logo from './logo.svg';
img1.src = logo;
In jsx:
<img src={logo} />
I have used it this way and it worked perfectly
import Product from "../../images/product-icon.png";
import { Icon } from "#material-ui/core";
<Icon>
<img src={Product} style={{ width: "21px", height: "24px" }} />
</Icon>
Adding file-loader npm to webpack.config.js per its official usage instruction like so:
config.module.rules.push(
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
);
worked for me.
Import Images in your component
import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'
And call the image name on image src={RecentProjectImage_3} as a object
<Img src={RecentProjectImage_3} alt="" />
A friend showed me how to do this as follows:
"./" works when the file requesting the image (e.g., "example.js") is on the same level within the folder tree structure as the folder "images".
Place the logo in your public folder under e.g. public/img/logo.png and then refer to the public folder as %PUBLIC_URL%:
<img src="%PUBLIC_URL%/img/logo.png"/>
The use of %PUBLIC_URL% in the above will be replaced with the URL of the public folder during the build. Only files inside the public folder can be referenced from the HTML.
Unlike "/img/logo.png" or "logo.png", "%PUBLIC_URL%/img/logo.png" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running npm run build.
If your page url contains multiple / then in src go back / count minus 1 times.
For example page url http://localhost:3000/play/game/ then src url must be ../your-image-folder/image-name. And your your-image-folder must be in public folder.
I create my app with create-react-app and I use require instruction if I want to change dynamically my image src:
export const MyComponent = () => {
const [myImg, setMyImg] = useState(require('./path/to/my/img'));
const handleClick = () => {
setMyImg(require('./path/to/other/img'));
}
return (
<div>
<img src={myImg} alt='myImg' />
<button onClick={handleClick}>Click me!<button/>
<div>
)
}
I am trying to use Laravel9 with Reactjs using laravel-breeze.
I made a new jsx file named Testpage.jsx only to check it work but Laravel keep gives me 404 not found page.
This is the link part in a Welcome.jsx page.
<div className="ml-4 text-lg leading-7 font-semibold">
<a href="/testpage"
className="underline text-gray-900 dark:text-white"
>
Test
</a>
</div>
And the routes/web.php
Route::get('/testpage', function () {
return Inertia::render('Testpage');
});
And the Testpage.jsx which is exists in resource/js/Pages/, same as the Welcome.jsx.
import React from "react";
export default function Testpage() {
return (
<>
<h1>TEST!!!!</h1>
</>
);
}
In the terminal, I am running the npm run dev command.
There are no errors at all.
I can see the 'Test' word in my Laravel page. However if I click the 'Test', then it shows me '404 | NOT FOUND' page.
And I checked the network tap in the browser, there is no Testpage.jsx at all.
What did I miss here?
I was so stupid. It was not working because there was the route cache.
I'm a beginner on Reactjs ans Javascript.
I read that create-react-app can access the public folder like this to get an image:
img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
But this also works but cant find documentation about it:
let photo = '/img/logo.png';
and another thing is if I try to read a json file the same way it fails:
let someJson = process.env.PUBLIC_URL + 'resume.json';
test code
return (
<div className="App">
<header className="App-header">
<img src={photo} className="App-logo" alt="logo" />
<p>
{someJson.basics.name} // FAIL ...
</p>
</header>
</div>
);
json
{
"basics": {
"name": "Foo Bar"
}
}
Why can I get the image and not the json?
You can import your JSON file inside the component. This is the recommended way, instead of using the public var path which has its downsides.
From the React docs
You can also add other assets to the public folder.
Note that we normally encourage you to import assets in JavaScript files instead (...)
If you put a file into the public folder, it will not be processed by webpack. Instead it will be copied into the build folder untouched. To reference assets in the public folder, you need to use an environment variable called PUBLIC_URL.
import React from "react";
// resume JSON file is at the same level than this file
import resume from "./resume.json";
export default function App() {
return (
<div className="App">
<p>{resume.basics.name}</p>
</div>
);
}
Listed downsides from using %PUBLIC_URL% (in Node) or process.env.PUBLIC_URL (in JavaScript)
None of the files in public folder get post-processed or minified.
Missing files will not be called at compilation time, and will cause 404 errors for your users.
Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.
Up until a few days ago, my implementation of LazyLoad was working perfectly, but now I can't seem to get it to work.
This is my component:
import React from 'react';
import LazyLoad from 'react-lazyload';
import './image.scss';
const Image = image => (
<LazyLoad height={200} offset={100} once>
<div
className="image-container"
orientation={image.orientation}>
<img
className="image"
src={image.url}
alt={image.alt}
/>
{'caption' in image &&
<div className="meta">
<p className="caption">{image.caption}</p>
<p className="order">{image.currentNumber}/{image.maxNumber}</p>
</div>
}
</div>
</LazyLoad>
)
export default Image
And in App.js it is called like this:
render() {
return (
<div className="wrapper">
<GalleryTop details={this.state.gallery_top} />
{this.state.images.map((image, index) => <Image key={index} {...image} /> )}
</div>
)
}
But it won't work! Here's the demo environment:
https://gifted-kare-1c0eba.netlify.com/
(Check Network tab in Inspector to see that images are all requested from initial load)
There's also a video here
Any idea about what I am doing wrong?
Thanks in advance,
Morten
I ran into similar issues with the npm package react-lazyload. For one, this package only allows one child per LazyLoad component, so you would have to rearrange your hierarchy to make it work. Secondly, I found some strange behaviors when loading images that were already set within the viewport. The documentation does list import {forceCheck} from 'react-lazyload'; combined with forceCheck(); as a means of manually checking the elements, but I found this inconvenient and insufficient for components that aren't rerendering.
I was able to obtain the exact same functionalities with an easier implementation from the alternative package react-lazy-load. Mind the hyphen. This package also requires node>0.14. More or less, it does the same thing. You can read their documentation here: react-lazy-load
I am working on a portfolio and I'm using react.js. I simply want to click an image, for example, a StackOverflow icon, and be able to redirect to the page. I'm seeing all sorts of different ways to go about, yet I cannot get it to redirect.
I am using React-Bootstrap which I don't know if that is going to change anything.
export default class Home extends Component {
render() {
return (
<Grid>
<Jumbotron className="brainImg">
</Jumbotron>
<div class="footer"><center className="iconsBaby">
<Image src="giticon.png" className="githubIcon" to="https://github.com/Joeyryanbridges" />
<Image src="linkedinIcon.png" className="linkedinIcon" href="https://github.com/Joeyryanbridges" />
<Image src="SOFIcon.png" className="githubIcon" href="https://github.com/Joeyryanbridges" />
</center>
</div>
</Grid>
)
}
Thank you for looking.
Generally an Image component should not be a link on its own. What you should do is wrap your image component with an <a> tag or use the Link component if you're using react-router.
<a href="https://github.com/Joeyryanbridges">
<Image src="giticon.png" className="githubIcon" />
</a>
OR with react-router Link
<Link to="https://github.com/Joeyryanbridges">
<Image src="giticon.png" className="githubIcon" />
</Link>
This way the Image component is not concerned with redirects or changing URLs and that functionality is handled by the proper component or tag.
Always keep in mind that separation of concerns is very important when it comes to reusability and maintainability.
Just wrap tag inside an like this:
<a href="abc.com">
<Image src="abc.png" />
</a>
Or If you are using react-router,then you can do this:
import { Link } from "react-router-dom";
<Link to="www.abc.com">
<Image src="abc.png" />
</Link>
Hope this help:
1.You can first declare in the state
load:false
2.use the onClick event and call a function like -
<Image src="giticon.png" className="githubIcon" onClick={()=> handleClick()} />
Inside the function set load to true.
Now check the value of the load to direct to whatever you need.
I hope it works.
There is another method to it , which is just create a onclick attribute to your react element
<img src="<img-link>" alt="<alt-text>" onClick={link} />
and then outside the return statement of your react function you can use 2 methods to link the image which is
location.replace and location.href
both of which would have syntax as follow
window.location.href = "<link>";
and
window.location.replace("<link>");
the methode to use this both is as follow
const link= () => { //remember the onclick attribute mentioned in img tag is having name **link**
window.location.href = "<the-link-to-which-you-want-to-redirect";
}
in this way you can achive your desired output!!
line 6 contain the function and line 18 contain styled react image element... refer if you want
Note:-
window.locatio.replace("")
will replace the webpage , so some one clicking on the image would not be able to use back button of browser .
So use them according to your need!!
The easiest way I've found is to just make sure you add target="_blank" rel="noopener noreferrer" to your tag. Like this:
<a href={ resume } target="_blank" rel="noopener noreferrer">
<img className="resume" src={ resumeLogo } alt="Link to resume" />
</a>
To use an image as a link in React, wrap the image in an tag or a Link tag if using react-router. The image will get rendered instead of the link and clicking on the image will cause the browser to navigate to the specified page.
import {Link} from 'react-router-dom';
The function code can be as follows:
<div>
<Link to="/your-pagename-or-url">
<img src="https://hamedvahedi.com/sample.jpg" alt="" />
</Link>
</div>