When you try to import any type of images inside React using the classical HTML it didn't work this is a big issue. So how to solve this problem?
<img src='./Image/Checked.png' height=50px width=50px/>
I spent a little bit of time researching this and I found 3 methods to solve this problem. This is why I made this Q&A style question. Hope to help other people like me out there to save some time.
Generally in HTML you will use this code
<img src='./Image/Checked.png' height=50px width=50px/>
But in React when you try to import assets like images you need a require tag. In the old versions it was enough to rewrite the code this way:
<img src={require('./Image/Checked.png')} height={50} width={50} />
The problem is that after a few updates the syntax changed a little bit and now for the images you need to use the default property to make it work. So with the new versions you actually have to use this code:
<img src={require('./Image/Checked.png').default} height={50} width={50} />
Another way to do the same think is to import the image and then use it this way:
import Image from './Image/Checked.png'
<img src={Image} height={50} width={50}/>
To finish in only case of svg images you can import them as React Component and use them this way:
import { ReactComponent as Image } from './Image/Checked.svg'
<Image />
Related
I'm building a simple desktop app using tauri, with a rust backend and a react frontend.
I'm passing the absolute path to a local image (on my device) from the backend to the frontend, and trying to use that path to display the image, but every time, the image isn't loaded and the console looks for the image inside the app folder:
I tried different things but I haven't been able to find a way that works for me to make sure the path given is interpreted as an absolute path, do you have any solution to suggest?
I've just play around and found that ReactJS default doesn't allow us to import any resources outside our app's folder.
As I tried to import an img via an absolute path from C:/ on my device, React returned this error:
Module not found: Error: You attempted to import C:/Users/admin/Pictures/Screenshots/a.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
So the only way I've found so far is to load the image as a base64 string, there are 2 ways to achieve that:
Import img as a ES6 module
Use <img src={require(...) />
Notice: If you paste your absolute path of the img to browser's address bar then double click it, you can see the "full path" of the img file with the prefix file:///.
Please refer to my example code below:
import React from 'react';
import imgSrc from 'file://C:/Users/admin/Pictures/Screenshots/a.png';
export const Demo = () => {
return (
<div className='test-import-img-from-device'>
<img src={imgSrc} />
It worked
<br /><br />
<img src={require('file://C:/Users/admin/Pictures/Screenshots/a.png')} />
It also worked
<br /><br />
<img src={'C:/Users/admin/Pictures/Screenshots/a.png'} />
Not worked
<br /><br />
<img src={'file://C:/Users/admin/Pictures/Screenshots/a.png'} />
Also not worked
</div>
)
}
Result:
In your case, I think <img src={require('file://...') /> would solve your issue.
Hope this can help!
I want to create an image slider in react js which works like a banner advertisement that has images and something is written in it. But have no idea how is it done. I have the following code
rrr.jsx
import React from 'react'
import img44 from '../../Assets/pic46.png'
import img45 from '../../Assets/pic47.png'
import img46 from '../../Assets/pic48.png'
const rrr = () => {
return (
<div>
<div className="banner" >
<img src={img44} alt="banner" />
<img src={img45} alt="banner" />
<img src={img46} alt="banner" />
</div>
</div>
)
}
export default rrr
Also, the picture for what I wanted is :
In this way, I would like to slide up to three pictures but don't have an idea how we do it. So, it would be good if someone would teach me.
For now, I have only the image and nothing written in it like . So, it would be good if someone would teach me how to make an image slider with banner advertisement.
With react you can use framer-motion
A production-ready motion library for React
In the docs It has a great example of building slide components uses AnimatePresence exit animations
I would like to slide up
The above example slide to the left, right. If you want to slide you can modify the variants from x to y.
So I want to use a Swiper library for react. I have multiple movie elements, and I want to swipe through them. I import it like this:
import Swiper from 'react-id-swiper';
And I use it that way:
<div className="carousel-container">
<Swiper>
{movies.map(movie =>
<MovieItem movie={movie} key={movie.title}/>
)}
</Swiper>
</div>
So it should make a horizontal slider with movie items, but on the page it looks like this:
So it's like I just put all the movies inside of a common div, although when I open the code in the browser, all movies are inside of swiper div with all the classes, so I'm not sure why it doesn't work the way it should. Maybe the problem is because I use .tsx file?
The issue is lack of css/styling.
The documentation on react-id-swiper is old. According to the documentation on the main module it uses (swiperjs) you need to add the styling/css like so:
import "swiper/css";
I've created a sandbox for you to see it working here
This question already has answers here:
Next Image not taking class properties
(4 answers)
Closed 1 year ago.
I use the Next.js <Image /> component to load the logo in my header. I want to position the component within the header. In short, I need to specify its margin.
<div className={styles.header}>
<Image src={logo} alt="logo" />
<nav>navbar</nav>
<ul>
<li>opt1</li>
<li>opt2</li>
<li>opt3</li>
</ul>
</div>
I know that I can simply place the <Image /> inside a positioned block, but is there a way to do it directly?
No there is not. You can modify many properties by passing className prop to next/image. But since margin is relative to the wrapper, modifying it won't help you.
What you are trying to do requires setting styles on the wrapper inserted over img tag by next/image, which currently is not possible (directly). See this discussion for better insight.
However, as a workaround (for your particular case) you can add the styles on your header that select the wrapper div. Refer: CSS Combinators
.header > div {
margin-left: 2em;
}
Update: In newer versions you can use the experimental image component that renders img without any wrapper.
I think using styled-components is a pretty way.
import Image from 'next/image';
import styled from 'styled-components';
const StyledImage = styled(Image)`
/* your custom style */
margin: 10px;
`;
and using it: <StyledImage src={image_path} />
As nextjs documentation on Image component says you can use className for styling the same way as you do with your usual elements.
You can apply class name to the <Image/> component. E.g.
<Image
className="dummy-name"
src={src}
width={2400}
height={1598}
layout="responsive"/>
Documentation has listed some useful properties.
Please try to help me!
I need to render svg image from my folder "project/assest/images/test.svg" on android and ios view.
I have tried :
Solution 1 : <Image source={imagePath}></Image>
Solution 2 :
import SvgUri from 'react-native-svg-uri';
<View>
<SvgUri
width="200"
height="200"
source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
/>
</View>
Solution 3 : First i should, convert svg file to png,jpeg then render simple image, but that very weired way on view
Please help, what did i wrong in this.
You can also try react-native-svg package for SVG
For Example --
import * as React from 'react';
import { SvgUri } from 'react-native-svg';
export default () => (
<SvgUri
width="100%"
height="100%"
uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
/>
);
You can try with this
<SvgUri width="200" height="200" source={require('./project/assest/images/test.svg')} />
May this will help you
here are two ways to use SVG in react-native.
one way is to translate the SVG to JSX use this site.
the other way is to use a font instead of SVG directly:
firstly, use SVG files to generate font. I use this site. it is fontello.
then I use react-native-vector-icons to generate icon.
for more details, you can see its API