I'm making a mock of data and rendering it using map. But my images take a long time to load and the component is a little slow.
I've already tried using Image component from Nextjs, but it gives an error because it only accepts a string in the src and I'm passing an array of images.
Code:
const data = [
{
id: 1,
name: 'Thanos',
image: '/images/thanos.png'
},
{
id: 2,
name: 'Jhon Wick',
image: '/images/jhon.png'
},
{
id: 3,
name: 'Spider-Man',
image: '/images/spider.png'
},
{
id: 4,
name: 'Doctor Strange',
image: '/images/strange.png'
},
{
id: 5,
name: 'Batman',
image: '/images/batman.png'
}
]
export function Home() {
return (
<div>
{data.map((d) => (
<div key={d.id}>
<img src={d.image} alt="Image" />
<p>{d.name}</p>
</div>
))}
</div>
)
}
What's the size of those images?
Try to tiny those images and check out if this will help you out
This is one service that can help you
https://tinypng.com/
About the next image component, how have you tried to use it? You shouldn't pass the whole array of images, you must use it as same you did as the HTML img tag, but pay attention to width and height props.
https://nextjs.org/docs/api-reference/next/image
Another thing, check out if your images are in the public folder
Related
I want to add custom styling to the slides and gallery control buttons in react-image-gallery But I am confused how to do this. I have searched the assets on google and tried to do it on my own but I am unable to apply custom styling on it.
This is the code which I have applied till now:
import 'react-image-gallery/styles/css/image-gallery.css';
import ImageGallery from 'react-image-gallery';
const GalleryComponent = (props)=>{
const properties = {
thumbnailPosition: 'left',
showFullscreenButton: false,
useBrowserFullscreen: false,
showPlayButton: false,
items: [
{
original: "https://placeimg.com/640/480/any/1",
thumbnail: "https://placeimg.com/250/150/any/1"
},
{
original: "https://placeimg.com/640/480/any/2",
thumbnail: "https://placeimg.com/250/150/any/2"
},
{
original: "https://placeimg.com/640/480/any/3",
thumbnail: "https://placeimg.com/250/150/any/3"
}
]
};
return (
<ImageGallery {...properties} />
)
}
Currently achived this :
Slider i wanted in actual:
So kindly tell me a way to target the required components in react-image-gallery to add styling to them.
Thanks!
In my solution I'm using Nuxt-Img that returns resized images according to the current resolution.
But with the img-Tag it's quite hard/dirty to work with e.g. adding linear-gradient or focussing the image having overlays etc.
With a background-image it would be quite easier but it seems that nuxt-img doesn't support resizing for background-images.
Update
Trying the following nuxt-image approach, the image size doesn't changes and is reloading the page always 418kb:
<script>
export default {
name: "SectionServices",
props: {
services: {
type: Array,
required: true,
},
},
computed: {
servicesVal() {
return this.services.map((service) => {
return {
src: this.$img(service.src, {
sizes: "xs:400px sm:640px md:768px lg:70vw xl:70vw xxl:70vw",
}),
alt: service.alt,
name: service.name,
link: service.link,
};
});
},
},
};
</script>
So is there any great advise how to handle that?
What is your recommendation? Using nuxt-img or is it better to work with background-image?
Using Background-image, how can I handle the image-size that I don't need to load large images for e.g. mobile phones?
When working with Embedded Zoom Component, the Zoom SDK return an element which you need to place it inside an html element
the problem is how to resize and position the returned component inside my code after rendering
const client = ZoomMtgEmbedded.createClient();
function getSignature(e) {
e.preventDefault();
// ... some code to get the signature
startMeetingZoomMtgEmbedded(response.signature);
}
function startMeetingZoomMtgEmbedded(signature) {
let meetingSDKElement = document.getElementById('meetingSDKElement');
client.init({
debug: true,
zoomAppRoot: meetingSDKElement,
language: 'en-US',
customize: {
meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
toolbar: {
buttons: [
{
text: 'Custom Button',
className: 'CustomButton',
onClick: () => {
console.log('custom button');
}
}
]
}
}
});
client.join({
apiKey: apiKey,
signature: signature,
meetingNumber: meetingNumber,
password: passWord,
userName: userName,
userEmail: userEmail,
tk: registrantToken,
success: (success) => {
console.log('success');
},
error: (error) => {
console.log(error);
}
});
}
return (
<div className="App">
<main>
<h1>Zoom Meeting SDK Sample React</h1>
{/* For Component View */}
<div id="meetingSDKElement"></div>
<button onClick={getSignature}>Join Meeting</button>
</main>
</div>
);
So my question is how to modify the style and the position of the component before or after the rendering of the code by the Zoom SDK.
For Resizing , You will find details in the following documentation link :
Zoom Documentation for resizing component view
For Positioning, You will find details in the following documentation link :
Zoom Documentation for positioning component view
The only way to resize camera view is editing #ZOOM_WEB_SDK_SELF_VIDEO id. So, you have to edit other classes also to make buttons, containers and etc resize like camera view does, but it is totally buggy and i don't think it is a good idea pay all this effort to a workaround, besides that, in next versions maybe they bring built in properties to do this job.
Just for example, this is the result when you change #ZOOM_WEB_SDK_SELF_VIDEO:
#ZOOM_WEB_SDK_SELF_VIDEO {
width: 720%;
height: 480%;
}
In general way, you can modify the style and position of your component by using reactive CSS styling.
In zoom way you can use (zoom web meeting SDK)
(a) "popper: {}" properties for positioning elements
(b) "viewSizes: {}" properties for default meeting canvas size
(c) for styling use "id" and "class" for reactive CSS styling
popper use:
client.init({
...
customize: {
video: {
popper: {
anchorElement: meetingSDKElement,
placement: 'top'
}
},
}
...
})
viewSizes use:
client.init({
...
customize: {
video: {
viewSizes: {
default: {
width: 1000,
height: 600,
}
}
},
}
...
})
This works:
let players = [
{ id: 1, name: 'Player 1', color: 'amber' },
{ id: 2, name: 'Player 2', color: 'sky' },
];
...
<span class="underline decoration-{player.color}-500">{player.name}</span>
Only sometimes. I can see the prop is applied to the class properly in the resulting HTML when inspecting the page source in the browser:
but the color is not applied to the underline most of the time. When I change the source HTML to a static color, save the file, and then change it back, one or both of the underlines stops working. Similarly, when I change a color in the javascript, usually the other color starts working, but not all of the time. Is this due to a race condition? Am I using Svelte wrong which might explain this seemingly random behaviour?
From this:
Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sort of arbitrary dynamic values that change on the client. Use inline styles for these situations, or combine Tailwind with a CSS-in-JS library like Emotion if it makes sense for your project.
What you should do:
<script>
let players = [
{ id: 1, name: 'Player 1', className: 'decoration-amber-500' },
{ id: 2, name: 'Player 2', className: 'decoration-sky-500' },
];
</script>
<span class="underline {player.className}">{player.name}</span>
I am trying to set a full screen video background which I want to be only visible on the app "homepage" with no success yet. The first component rendered on the app is HomeComponent.
app-routing-module.ts (only path is shown)
const routes: Routes = [
{ path: '', redirectTo: '/accueil', pathMatch: 'full'},
{ path: 'accueil', component: HomeComponent },
{ path: 'ligne/:lineId', component: LineComponent },
{ path: 'ligne/:lineId/station/:stationName', component: StationComponent }
];
What I'd like to do is to have the video background only when I'm on /accueil but not on the other paths/components. Is there any way to do that ?
Thanks in advance.
You can add the router to your component that contains the div you want to set the background to the video
and then do something like this:
if(this.router.url===routeIWant){
this.custom-bg=true
}else{
this.custom-bg=false
}
And on the html the following div is the one you wanna set the bg
<div [ngClass]="{'customBgClass': custom-bg}">
And on the css
.customBgClass{
background: url(your-video-url)
}