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
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.
I am currently using Next.JS to create a static website with the main objective to have a very good SEO-optimized website.
Everything works fine and the website is correctly deployed with Vercel, but I have noticed that part of the content is not present directly in the HTML files.
For instance, I have a component that loops over an array of data, using the array map method, like this:
{imageTexts.map((image) => (
<ImageText
key={image.title + 'TitleImage'}
title={image.title}
description={image.description}
size={imagesSize}
image={image.image}
/>
))}
Once the website is deployed to Vercel, I search inside the HTML file for the information/strings contained in the array of data (imageTexts), but I can't find them. I guess Next.JS uses javascript to target some sort of div and then loops over its own JSON file to dynamically display content.
For me, this seems to kill a lot of the SEO advantage that static websites have over SPA. Is there any way I can have those strings directly inside my HTML files?
I am still not 100% sure this is caused by the map method, but I don't find any other explanations. Especially because other dynamically loaded components don't have the same problem. For example, this component string can be found on the HTML file, without a problem:
{title ? (
<Text
type="h2"
textAlign="center"
>
{title}
</Text>
) : null}
If you are mapping over ImageTexts on the server and that component renders HTML tags, then that HTML should be sent on the first-page load, and you could see it if you do CTRL+U or disable javascript.
Ok, I have just found that the reason. It has nothing to do with the map method. I was actually using the <Remark> component from library called react-remark. It seems it does not play well with Next.JS
<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.
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.
In my ionic app, I need to load icons using ng-src. Depending on the format of the document, corresponding icon needs to be displayed.
I was trying to do something like
<img ng-src="{{format === 'docx' ? '../img/Word-icon.png' : '../img/PDF-icon.png')}}">
If the format is docx (I have verified that format value is coming correctly), then display Word-icon.png. For everything else display PDF-icon.png.
This is not working. In fact the page stops loading when I do this. It does not throw an error in the browser console but also does not load the page. Icons are stored in the img directory inside the www folder in the ionic app.
You had unnecessary ) at the end of expression.
<img ng-src="{{format === 'docx' ? '../img/Word-icon.png' : '../img/PDF-icon.png'}}">