Trying to use skeleton as Next/Image loader. I am not trying to use react Suspense.
Unhandled Runtime Error
TypeError: customImageLoader is not a function
Code is
import Image from 'next/image';
import Skeleton from '#mui/material/Skeleton';
....
<Image loader={ <Skeleton />}
Skeleton
https://mui.com/material-ui/react-skeleton/
Related
For a website using NextJS and Sanity.io,
I am importing an image locally
import large_logo from '../../assets/logo-large-1200x630.svg
and am calling it inside an img tag as src
<img src={large_logo}/>
However, the image is broken and not displayed.
The HTML is rendered as
<img src="[object Object]">
The only solution to this problem was to call the src of the "object"
<img src={large_logo.src}/>
However vanilla React does not require us to call the src.
Does importing not work when using NextJS and Sanity?
For Next.js you have to do something like this:
/* import Image component */
import Image from 'next/image';
/* import the required svg file */
import large_logo from '../../assets/logo-large-1200x630.svg
and then in JSX
<Image src={large_logo} />
When you are using Next.js and wanna render an image that the size is more than 40*40(pixels) need to import the <Image /> component from next/image.
That component optimize your image and render in your Application. So follow the example below to help yourself..
import Image from 'next/image';
import large_logo from '../../public/logo-large-1200x630.svg
inside your component you can add this code snipet for your image
<Image src={large_logo} alt="logo" width={200} height={100} quality={100} />
First of all you need to change the image directory of the image and put it in your public directory of your App, cause this is the default behaviour that Next.js needs for the images.
Inside your component you need to pass the src value, alt value and usually height - width prop or layout prop.
You can also need the official documentation for the of Next.js : https://nextjs.org/docs/api-reference/next/image
I am trying to add svg as a background image and i am using a React-Native-Svg to generate my svg and I've been trying to add it onto
<ImageBackground source{{'<svg>...'}} />
But I cant manage to get a anywhere with it
If anybody could give pointers i would really appreciate it
As the documentation says you need to import the .svg file inside de Component:
import Logo from './logo.svg';
You can then use your image as a component:
<Logo width={120} height={40} />
From: https://github.com/react-native-community/react-native-svg#use-with-svg-files
Environment info
React native info output:
"react": "16.8.6",
"react-native": "0.60.4"
Library version: 1.2.3
Steps To Reproduce
Create a fresh project using react-native-cli.
Bring in an SVG file into the src folder of the project (I downloaded and used the homer simpson image mentioned in the documentation of react-native-svg-uri for the test ).
Import the svg as import MySVG from './mysvg.svg';
Pass MySVG into svgXmlData property of SvgUri component
Expected behaviour
The image should render on screen
Reproducible sample code
import React from 'react';
import SvgUri from 'react-native-svg-uri';
import MySVG from './mysvg.svg';
const MyComponent = () => {
return (
<>
<SvgUri
svgXmlData={MySVG}
width="25"
height="25"
/>
</>
);
};
export default MyComponent;
Error Message
You can try this Direct Path Declaration
<SvgUri
width="25"
height="25"
source={require('./mysvg.svg')} />
If you have a svg file declared and not using an uri, I would recommend to use the react-native-svg project from the react-native-community (https://github.com/react-native-community/react-native-svg)
With this, you turn your svg file to a React Stateless Component (the translation is quite straightforward) and you can use it as a standard React component.
I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.
Here is how I load svg image
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
Please find the gif link that shows the loading delay issue.
https://ibb.co/jH35S38
PS. This happens in production only.
I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay.
It works for me.
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;
I am using SvgIcon in a react app from material-ui https://material-ui.com/api/svg-icon/. All examples in the document are <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />. I don't know what it is. How can I use this component to render a svg from external file?
I have checked this post How to use an SVG file in a SvgIcon in Material-UI but it doesn't give an answer to load external files.
There is no way to use Path to load external svg. You should use <img /> inside de <Icon> according to this answer in github:
In the '#Christos-Lytras' answer there is an example on how to do it
You may import svg icon as a react component and use this component wrapped inside the SvgIcon component:
import { ReactComponent as Car } from './icons/car.svg'
...
<SvgIcon>
<Car />
</SvgIcon>