Images being rendered as SVGs in Frontity React - reactjs

I have an issue with Frontity React, where it loads up featured images fine and some other images, but quite a lot of image which are added to the page either from a plugin (such as foogallery)
<figure class="fg-item-inner"><span class="fg-image-wrap"><span height="300" width="200" class="css-pxqjd2-Container e16qyzlb0"><img alt="" class="frontity-lazy-image skip-lazy fg-image" loading="lazy" width="200" height="300" data-src-fg="2109218829.jpg" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22300%22%20viewBox%3D%220%200%20200%20300%22%3E%3C%2Fsvg%3E"></span></span><span class="fg-image-overlay"></span><figcaption class="fg-caption"><div class="fg-caption-inner"></div></figcaption></figure>
Any idea what might be causing this?

FooGallery adds a placeholder SVG for its lazy loading, which is replaced when the gallery JavaScript runs. You can disable lazy loading for the gallery (or for all galleries via settings page) which will stop this behavior.

Related

Logo image does not show up in react

In my react app, I tried displaying an image as a logo of my website in top navigation bar as follows:
I copied logo.png in the same folder as my NavBar.jsx.
Added following in NavBar
<img
src={logo}
width="30"
height="30"
/>
It gets displayed correctly when I browse http://localhost:9001/, but when I try accessing inner pages, say http://localhost:9001/courseware/course/, it shows broken image.
Then I tried to try it another way. I copied the image in public/images/logo.png and then trying displaying it as:
import logo from "./logo.png";
<img
src={`${process.env.PUBLIC_URL}/images/logo.png`}
width="30"
height="30"
/>
But now it does not show up on any page.
What I am doing wrong?
PS: I am running this app from vscode debug mode.
I think if you want to use image in your element, you have to import it before. You can not use variable in src{} without importing. Import it with complete address, then use it with the name you wrote, in src{}.

No video thumbnail preview Reactjs

I don't have any thumbnails displayed when the video is not launched on mobile, but on the web I do have the preview, if anyone has an idea, thanks.
<Video><video playsInline controls width="300" height="300">
<source
src="4.mp4"
type="video/mp4"
/>
Sorry, your browser doesn't support embedded videos.
</video></Video>
I had this issue also on my React.js application only on a mobile view.
I've tried to add the preload="metadata" attribute without success, and also tried another hack to add this string at the end of the URL - "#t=0.001" that should stop the video one second before, and still the same issue.
I found a nice solution that also allows you to control the thumbnail by adding a poster attribute with a URL of the image that you want to display. it looks like that in the code:
<body>
<video
width="400"
height="350"
controls
poster="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png">
<source
src="https://media.geeksforgeeks.org/wp-
content/uploads/20200409094356/Placement100-_-GeeksforGeeks2.mp4"
type="video/mp4">
</video>
</body>

How to use antd Carousel with antd Image.Preview

I am using React with ant design. I am trying to create a page with a list of cards. In each card, there is an image carousel. I would like that when the user clicks on and image, the preview opens and they can swipe (or click on the arrows) to see all the images as a big, fullscreen preview.
I tried this:
<Image.PreviewGroup>
<Carousel autoplay>
{this.images.map(
(image: string, index: number) => {
return <Image key={index} src={image} preview={{ getContainer: '#root' }} />;
}
)}
</Carousel>
</Image.PreviewGroup>
But what happens here is that when the preview is opened, instead of showing 5 images, it is showing 11 (the images are shown twice, one of the images is shown 3 times).
If I place <Image.PreviewGroup> inside the <Carousel>, then instead of having an image carousel, I have multiple images stacked under each other.
How can I get it to show a clickable carousel, which when clicked, opens a fullscreen preview with the correct number of images that can be seen by swiping/clicking on arrows?
Thanks in advance.
just got into same issue and solved it. for the code structure, the first one you tried was fine
MAIN PROBLEM:
the main issue is on the carousel, which is using slick lib. if you inspect your page, you will find that inside the carousel wrapper tag, it generates 2-3 images for each <img> we declare in our code. so automatically, the Image.PreviewGroup that wraps the carousel, will detect more <img> than it should have
SOLUTION:
add infinite={false} props to your carousel component. for more detail , please refer to slick docs

Svg images not animating when using it in <img> tag in react

So basically I am loading a svg in img tag as a loader. Image is coming up and displaying but it's not animating. If I put it in index.html it's working as expected. I expect as it is JSX something I am missing don't know what. Any lead is appreciated.
If SVG image is loaded into an <img> tag, it will render as a static image, and its internals will not be accessible to page's javascript, and page's style definitions will not affect it.
The only way it can be animated is if the SVG itself defines its animation (aka SMIL animation). However, the support for animated SVGs is patchy (IE, Edge, Firefox, Chrome (considered for deprecation)).
If you want to dynamically affect your SVGs, embed them into the page directly, as <SVG> tags.
Is your animated SVG self contained? By that I mean is it using internal SMIL or CSS animation?
If so, then embedding it using <object> should work. It will not animate if you embed it using <img>.
As correctly presented by e-neko in one of the answers of the current question, img tag is rendered as static element. Because of that, this is how I managed to make an animated SVG be correctly rendered:
public render(): ReactElement {
const { icon } = this.props;
return (
<svg>
<image xlinkHref={icon}></image>
</svg>
);
}
The icon is passed as props and imported in the parent component like this:
import LoadingLogo from './assets/images/loading.svg';
I didn't manage to find any official documentation regarding this subject and this worked for me using latest React Version (16.12.0) available when posting this answer.
Cheers

Chrome mobile and Fancybox -> Images not loading correctly

I have a website that aggregates some FB events for my city and I've tried making it responsive
I'm having an issue opening it in my phone(s3 mini) that the image for the event won't load correctly.. BUT it loads when I try closing that fancybox and opening the a second time, this doesn't occur at all in desktop browsers.. I have no idea on how to fix this, can anyone help?
Address: fubuia.com.br
Here's pics:
Opening an event for the first time
After closing fancybox and opening it again
With some code it would be better...
I think the image is loaded after your fancybox, try to add width and height properties in your images.
<img src="/path/to/your/image.jpg" alt="" height="100" width="100">

Resources