I am using react js and material ui i want to slides images (autoplay) in card media i don't know what i am doing wrong please let me know if anyone got to know.
<CardMedia
component="img"
height="194"
image={
<Carousel autoplay>
{product.images.map((image, index) => (
<div key={index}>
{console.log(image)}
<img
src={`http://localhost:5000/${image}`}
/>
</div>
))}
</Carousel>
}
/>
import by using this
import { Carousel } from 'react-responsive-carousel';
You can import an image by calling the relative path and setting it up like below:
import { image } from '../../images/xxx.jpg';
<img src={image} />
I hope it solves your issue.
I have a project, where I am using React-pdf to generate a document. I want to add an SVG logo to this document. According to the React-pdf documentation, they have an element called
Svg that is a container that defines a new coordinate system and viewport, and it is used as the outermost element of SVG documents. From what I understand I should somehow convert a normal svg to the type of element that React-pdf uses, in order to make it work? (If so, how could I accomplish this? Can I use some sort of external library?). My code is below(Now it gives me an error because I can`t use the Image from React-pdf to render svg. If I use the Image element with src of an image that is in the format .jpeg or .png it works.
import {
Page,
Text,
View,
Document,
StyleSheet,
Image,
Svg,
PDFViewer,
} from "#react-pdf/renderer";
...
return (
<div>
<PDFViewer style={{ width: "98vw", height: "98vh" }}>
<Document title="TITLE" author="AUTHOR">
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Svg>
<Image src={logoUrl} style={styles.logo} />
</Svg>
<Text>My PDF</Text>
</View>
</Page>
</Document>
</PDFViewer>
</div>
);
...
An easy way to do this is to put your SVG file in a folder in your React Project. And then import it into your app.js or wherever you need it using an img tag
import myIcon from 'icons/myIcon.svg';
import {
Page,
Text,
View,
Document,
StyleSheet,
Image,
Svg,
PDFViewer,
} from "#react-pdf/renderer";
import myIcon from 'icons/myIcon.svg'
...
return (
<div>
<PDFViewer style={{ width: "98vw", height: "98vh" }}>
<Document title="TITLE" author="AUTHOR">
<Page size="A4" style={styles.page}>
<View style={styles.section}>
//CALL YOUR SVG USING IMG TAG
<img src={myIcon} />
<Text>My PDF</Text>
</View>
</Page>
</Document>
</PDFViewer>
</div>
);
...
I replaced your SVG TAG with <img src={myIcon} />
You will need to use actual svg code and any svg related tags. It is all documented pretty well here: https://react-pdf.org/svg
Example in React:
import React from 'react';
import {
Svg,
Polygon,
Rect,
Page,
Document,
} from '#react-pdf/renderer';
const ExampleSvg = () => (
<Svg width="200" height="200" viewBox="-100 -100 200 250">
<Polygon points="0,0 80,120 -80,120" fill="#234236" />
<Polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
<Polygon points="0,-80 40,0 -40,0" fill="#38755B" />
<Rect x="-20" y="120" width="40" height="30" fill="#A32B2D" />
</Svg>
);
const PdfToShow = () => (
<Document>
<Page size="A4">
<ExampleSvg />
</Page>
</Document>
);
export default PdfToShow;
This is very old but, as far as I can see the Element from react pdf expects actual svg code, you are giving it and img tag which is invalid.
Image Magick can convert your svg to a png. This answer might help: How to convert a SVG to a PNG with ImageMagick?
I am using gatsby-plugin-image's StaticImage component in my web app, and I am having trouble changing objectFit's property from 'cover' to 'contain.'
Here is a sample of my code:
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import { StaticImage } from 'gatsby-plugin-image'
export default function About() {
return (
<div id="about">
<Container fluid >
<Row className="justify-content-center align-items-center">
<Col md={12} >
<StaticImage src="../images/coolImage.JPG" objectFit="contain" alt="Profile Picture" />
</Col>
</Row>
</Container>
</div>
)
}
I have also tried using style={{ objectFit: 'contain' }} and imgStyle={{ objectFit: 'contain' }} to see if using those props would change the styling. I'm using Sass to style other parts of the website as well, and adding that styling option via Sass and class names isn't working either.
Any ideas as to why the default object-fit: 'cover' won't change?
There's a prop 'objectFit' (along with 'objectPosition') that can be passed to StaticImage directly. I'd try that. My guess is that your passed styles are being overwritten inside StaticImage, but passing the direct props would fix it. https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/
I had to add style={{height: "100%"}} as a prop to StaticImage in order to make an image cover a full view-height container. The image wrapper does not automatically take the whole space of the container element.
I am adding two props (textProp & imgProp) to my custom component, but I keep on getting this error <Image> component cant contain children. This is what I have soo far
function TextImg(textprop, imgprop) {
return(
<div>
<div>
<Text>{textprop.text}</Text>
</div>
<div>
<Image source={imgprop.imageUri}>!</Image>
</div>
</div>
);
}
Can anyone help me regarding this, Thanks!
Images (img) are considered empty elements and are self-closing, and required to be per the html spec.
https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
The react native Image has the same restriction.
They can't wrap anything or have any children nodes. The "!" is the issue.
<Image source={imgprop.imageUri}>!</Image>
Try instead
<Image source={imgprop.imageUri} />
If you need to display an "!" then it'll have to be outside the image.
if you need to show "!" in image,
Try
<View>
<Image source={img} />
<Text
style={{
position: "absolute",
// some stylng
}}
>
!
</Text>
</View>
I am using Material-UI Avatar React component to show profile images. While compiling it can reach the image, there is no error in compile time. But image is not showing in the browser.
Please check this image to better understand
Codes:
import {avatar} from '../../images/avatar.png';
<Box component='div'>
<Avatar src={avatar} alt="Russel Crow"/>
</Box>
Please tell me why image is not showing in the browser and How to show it?
You used a named import, try it like this:
import avatar from '../../images/avatar.png'
You can try with inline url.
Try to run like this
import Avatar from '#material-ui/core/Avatar';
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />