<CardMedia
className={classes.cardMedia}
image="https://source.unsplash.com/random"
title="Image title"
/>
i have this card component that has an image
this works perfectly but it generates an random image according ti the url "https://source.unsplash.com/random"
i need to replace the url with an other one from a google image
but when i put the link for example (https://www.google.com/search?q=credit+card+images&tbm=isch&source=iu&ictx=1&fir=yTCt2mYy4QLi2M%252C-uamK6tjDy_5gM%252C_&vet=1&usg=AI4_-kQyjcIQ9sXlfX8yIJxLD3J9BMHRUw&sa=X&ved=2ahUKEwiO48bludHqAhVI2KQKHXWzCskQ9QEwAXoECAYQMg&biw=1366&bih=657#imgrc=blCwDWRxIOqbxM)
nothing happens and no image shows
Right click on the desired image and choose Copy image address. That's the address you want to use in your app.
Related
I use next/image to render images on the site and set the alt tag appropriately. The images I use originate from a CDN. I have a NextJS-based repository. The issue is that, despite the fact that the image is rendering correctly, whenever I check my site's Google cache and switch to the text-only version, Google attempts to replace the image with the text specified in the alt attribute, which is somehow repeating itself. As a result, instead of displaying "Some Image ALT," Google displays "Some Image ALTSome Image ALT."
Here's my implementation for reference:
<div className="videoCard__image">
<Image
src={bannerUrl}
alt={titleLabel}
layout="responsive"
width={123.6}
height={120}
className="videoCard__image--banner"
priority={loadPriority}
sizes="33vw"
quality={80}
/>
<PlayCircleOutline className="videoCard__image--play-icon" />
</div>
Rendered image HTML from next/image ->
Rendered image HTML from next/image
Google cache text only version ->
Google cache text only version
Expectation: ALT attributte text to occur to once instead of twice.
All the images are displayed as broken image icon on my React app.Here I'm trying to display this image but this too appears as broken
If you want to call images inside your src folder you have to import it first.
import neonSpace from './neon-space.jpg';
and alter you can use it in your like this:
<img src={neonSpace} />
If you want to call the image only with the URL you must have to put your image in your public folder. (sibling folder of src)
<img src='./neon-space.jpg' />
Hope it helps!
How can I show featured image in reactJS? I'm using Rest API with ReactJS. I had fetch every content. In the console, I can watch the featured_media value. How can I retrieve it in my reactJS image component?
You can use the following code to get the featured image.
_embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url
here is an example:
this.state.posts.map(post=>
<img
alt="example"
src={post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url}
/>
)
you will get more idea from here : https://github.com/BRdhanani/headless-wordpress-with-react
Before i added the id of the object to the url the images loaded fine but once i added the ID The local images are not loading but url images work. Everything is returning fine in the console and it is the correct pathname.
I have tried using require but it just gives me a huge error with all of my images and some css.
I expect the corresponding image to show
This how the image file looks in my data
img: "img/product-8.94-1.png",
< img src={require(`../${img}`)} className="img-fluid"
alt="product"/>
This is the route and Link ( i added id)
<Route path="/details/:id" component={Details} />
<Link to={`/details/${id}`}>
Probably you are using relative paths to images in your app, if you changed route path from http://demo.com/details to http://demo.com/details/id the image cannot find the correct path, you got one extra folder details/id.
You don't show as how you get the path to the image, but if your image is in your assets folder of reactjs app, then import it like a component.
import img from "assets/image.jpg";
and then in component add it img src tag like this:
<img src={img} className="img-fluid" alt="product"/>
If you get images from db, then make sure you use full path to the image.
https://codesandbox.io/s/priceless-ardinghelli-sp0yg
I am using cordova-plugin-photo-library to show gallery images in my app. I have used their photoLibrary.getLibrary() method to get the image. That methods returns two type of url:-
photoURL(ex:- cdvphotolibrary://photo?photoId=ADB24867-0CCB-4207-923A-DC9D44233434%2FL0%2F001)
filePath(Ex:- /var/mobile/Media/DCIM/100APPLE/IMG_0652.JPG)
I have tried to show image using either of those path. I am able to show the images using filePath but could not show the image using photoURL. All images does not return filePath. Could anyone can help me to show images using photoURL?
As per their doc we can show directly using photoURL all we have to use imgSrcSanitizationWhitelist(). I have tried but it's not working.