Material-ui's Card component can have a CardMedia component as a child that accepts image source as a prop. Gatsby-image on the other hand requires it's own source as a prop(fixed or fluid).
<Card>
<CardHeader title={title}/>
<CardMedia src={image.localFile.childImageSharp.fixed} component={Img} />
</Card>
Is there any workaround for this issue?
Both, <CardMedia> and <Img> are wrappers themselves. The first one accepts children as a prop (as shown in their documentation) and <Img> from Gatsby-image is a container with its own features (responsive sizes, lazy loading, etc), not an image itself.
You can easily fix it by wrapping the <Img> with the <CardMedia>:
<Card>
<CardHeader title={title}/>
<CardMedia>
<Img fixed={image.localFile.childImageSharp.fixed} />
</CardMedia>
</Card>
Gatsby image isn't here just for getting source of the image, it has its own features which requires that it has its own container.
On the other hand CardMedia is dedicated container for showing image from source.
To fix your issue simply mimic behaviour of CardMedia component. This is simple container just holding image anyway.
Related
I am using Next JS and Material UI together in my project. for Image optimization, I would like to use the Next JS Image component.
currently, my card media looks like below. I am getting the image URL row.image.url from an API call and assigning it to the image prop of the CardMedia component
<CardMedia
className={classes.cardMedia}
image={row.image.url}/>
But I would like to take the advantage of the Next JS Image component for the optimization and lazy loading but couldn't able to see a way to fit this.
import Image from 'next/image'
Did anyone face this type of requirement?
Appreciate your help
Thanks
Venk
You can do it like this:
<CardMedia className={classes.cardMedia} title="Your title">
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
<Image src={row.image.url} layout="fill" objectFit="cover" />
</div>
</CardMedia>
Check this answer for more info
In Material UI the components that display images have a parameter for the image. eg:
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
In Next.js v10 there is a new Image component that automatically scales images: https://nextjs.org/docs/api-reference/next/image
Has anyone figured out how to use the new Image component with Material UI?
I am able to use it like this and it works well. I hope it will be helpful.
<Avatar className={className}>
<Image src={src || placeholder} alt={alt} layout="fill" />
</Avatar>
import image_1 from "/static/images/avatar/1.jpg" //locate image
then just replace
src="/static/images/avatar/1.jpg"
to
src={image_1.src}
In JSSOR 26.5, using $ThumbnailNavigatorOptions: {$ChanceToShow: 0} is supposed to completely hide the thumbnails. However, the display:none is applied only to the thumbnavigator element, NOT the container that is injected around thumbnavigator.
As a result, the absolutely-positioned container renders atop the slider. It's invisible because its only child (the thumbnavigator) is not displayed. But it intercepts click events, so it is having an effect on my UI.
In one case, the navigator (bullets) are rendered "below" the hidden thumbnails, which makes the bullets not clickable.
In version 19.0.1. there was no wrapper injected around "thumbnavigator", so the problem was not there. We moved from 19 to 26, and that is where I see the problem.
Solution is to put the display:none on the injected thumbnavigator wrapper, rather than on thumbnavigator itself.
Please resort html order to move bullet navigator above thumbnail navigator.
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort101" style="position:absolute;left:0px;bottom:0px;width:980px;height:100px;background-color:#000;" data-autocenter="1" data-scale-bottom="0.75">
...
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb032" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
...
</div>
I want to make a function that allows me to display an image or a swf, I noticed that the embed tag I can show both, I lnvestigated and got nothing about it, there is some downside in using it?
example:
<embed src="image.png" />
<embed src="flash.swf" />
Both work even without including the type.
You really should use the <img> tag for images and not <embed>. Instead, figure out what the file type is first and then use either <img> OR <embed> depending on the file type.
Yes, but, however, <embed> tag isn't recommended to be used.
i have gwt app, and one of the 'page'(or display) has a iframe whose url point to google web page, however when deploy the app, google page doesn't show up. here is the code
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Frame url="http://www.google.com/"></g:Frame>
</div></g:HTMLPanel>
if i replace the google webpage with a static image stored locally, it show up fine:
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Image url="img/myImg.jpg"></g:Image>
</div>
</g:HTMLPanel>
can anyone tell me why it won't work with external link? Thanks
Answered on the GWT group: https://groups.google.com/d/msg/google-web-toolkit/nwlTBBVGJSA/pho1SVeviQEJ
Copied here for convenience:
Google refuses to be displayed in a frame using the X-Frame-Options HTTP header.
See http://code.google.com/p/google-web-toolkit/issues/detail?id=7055
The code you provided creates the UI, including the frame, just fine. The thing you're not doing is setting a height and width for your frame, so it's effectively invisible. Change your code to the following and you'll see your frame.
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Frame url="http://www.google.com/" height="150px" width="150px" />
</div></g:HTMLPanel>
The reason you didn't have to specify the height and width for an image is because they are implicitly defined by the image itself. There's no way for GWT to know how big you want an iframe to render on your page, so you have to explicitly set the size.