I am having an issue on my site where my above-the-fold masthead image comes in way too late which makes the site feel slow. The site is built with GatsbyJS where I am using the Gatsby Image plugin as well. I have tried with rel="preload as="image" but this didn't seem to do any difference:
<Img
fluid={
wpgraphql.imageFile.childImageSharp.fluid
}
id="hero__image"
style={{
position: "initial"
}}
rel="preload"
as="image"
/>
After reading the Gatbsy Image documentation I found that loading="eager" could make a difference as well. I therefore have tried adding the loading="eager" but still my masthead image is one of the last things to be discovered in my waterfall.
How can I make my masthead image load critical and come in earlier in my waterfall?
Gatsby Image uses a low-quality preview image in the src and delays the switch from this preview image to the full-size image until Gatsby is initialized client-side (which happens after React hydrates). For this reason it's never going to be particularly performant for above-the-fold content. I recommend using the srcSet data that comes back from the query you have now directly:
<img
srcSet={wpgraphql.imageFile.childImageSharp.fluid.srcSet}
alt=""
loading="eager"
/>
From here you can style it to match your desired output.
Related
I created a ReactJS project based on a tutorial useng NextJS. When running locally, the logo image on the top left corner render perfectly. However, in production, after deploying in Netlify or Vercel, The logo on top left corner do not render.
I researched and found that tere is an issue related to NextJS image rendering. However I could not fix it on my onw project.
The logo is located on the component Navbar.jsx
line 55:
<Link>
<Image
src='/../public/assets/navLogo.png'
alt='/'
width={125}
height={50}
/>
</Link>
vercel (production):
https://portfolio-next-js-tiagoc0sta.vercel.app/
git repo:
https://github.com/tiagoc0sta/portfolio-next-js.git
I finally checked your package.json file and realized you're using next v13. It is now using a new next image component with different styling than in previous version. I suggest you check the official documentation on vercel page.
But to test it out, edit your code like this:
<div style={{position:"relative", height:"200px", width:"280px"}}>
<Image src={source} alt="" fill style={{objectFit:"cover"}}/>
</div>
Make sure that the images' parent div is relatively positioned and has some dimensions set.
I'm trying to require an image from a location inside the SRC folder in React (not from public unfortunately) and the specific name of that image will be granted from props.
The issue is that I need the image to be set as the background image of a <div />. The image doesn't show up.
I tried that:
<div
style={{
backgroundImage: `url('${require(`../../assets/images/home/${banner?.srcString}`)}')`,
backgroundSize: "cover"
}}
/>
Is there any way to solve this without using <img /> and without moving all images to /public?
No, you can not require images dynamically from src directory, and it's not just limited to React, it's about all JavaScript frameworks that use Webpack internally. Also, this is exactly one of the use cases of public directory, as it's been mentioned in the documentation: When to Use the public Folder
You can also check the following links for more discussions around this question:
Load local images in React.js
How to give Image src dynamically in react js?
React, load images local from json
I'm building an app using React Native with Expo. Everything works fine except the images, they load correctly but it takes about 2 seconds to load, and it's weird because all the images are local images and they are light too, so they should load instantly. This problem occurs also after I build and get the .apk on my android device so the images are always stored locally.
This is a portion of the main page of my app:
...
<View style={styles.bottomItem}>
<View style={styles.bottomItemInnerFirst}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('SecondPage')}>
<Image
source={require('../assets/images/iconT.jpg')}
style={{width: '100%', height: '100%'}}
resizeMode='contain'
/>
</TouchableOpacity>
</View>
</View>
...
The problem occurs not only with the Image tag but also with ImageBackground.
I've looked at this doc too https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets/
but I'm using local images and I don't know what to do to make it work.
you can install new dependencies
npm install react-native-fast-image
and change Image into FastImage
for reference, you can visit this website:- https://www.npmjs.com/package/react-native-fast-image
this dependency will increase the loading of your Image
Asset Optimisation can also help you in expo. You can try the below commands to optimize assets in your project.
npm install -g sharp-cli
npx expo-optimize
Thanks!
Please consider following these steps:
First of all, we need to make sure that your images are not so big in size, because sometimes you find some applications (mostly photographic ones, kindly take a look at this link) are loading images with 2MB or even bigger, that's why they are slow, however the best image size range is between 100KB to 400KB.
Use one of the caching libraries to provide a performance boost in the loading time as such: react-native-progressive-fast-image or react-native-fast-image, be aware that these packages consume memory.
Please be cautious about inline styling and JSX callbacks, each re-render it will create another callback reference and another style Object (this is not very useful for your case but it will increase a little bit the JS thread FPS).
If you are using Image from react-native-elements, you have to set the transition property to false.
<Image
source={require('../assets/images/iconT.jpg')}
transition={false}
/>
I’m a little frustrated because it took a very long time to get file upload working. I’m working with vue on the frontend and using meteor for backend. The file-upload is done using Meteor-Files from VeliovGroup. The uploading works without issues and the files are getting stored in the .meteor-Directory (default Directory of Meteor-Files) while the app is running in dev mode. But now, how can I get the images or other files I uploaded? The path that is stored in the FileCollection for each file is not right, if I use it for example for the src-attribute of an image. Is there something I’m missing? Is it simply not possible at dev mode?
I tried to set different storagePaths in the Meteor-Files-Settings, tried the "path" and the "link" attribute of the Fileobject in the FileCollection.
<div class="" v-for="Image in getImages">
<img :src="Image.path" />
</div>
<!-- this is the Vue-Frontend where I'm trying to display the images, getImages is the FileCollection from Meteor-Files -->
I Just want to display or get my images, which I uploaded.
Thanks a lot in advance. If you need specific code snippets, just ask
Mario
Does the same thing happen when you just hardcode the src for 1 file? I've had quite a lot of trouble dynamically binding to an img tag in the past. So I wonder, if you just replace <img :src="Image.path" /> with <img src="yourhardcodedfilepath" />, does the image then get displayed, or is it still not displaying correctly?
Okay, I took the wrong absolute path for the config.storagePath. Now it works with the right absolute path. But I still can't access uploaded files in dev, that have been uploaded to the relative path in the temporary build-folder. But I think, I can do a workaround for that.
I am developing a website in React.js which has a bunch of image calls.
So it was mandatory to implement lazy loading of the images so that images present in the viewport will be only called on the initial loading of the website,
I am currently using https://www.npmjs.com/package/react-lazy-load-image-component to implement lazy loading.
It is working fine in desktop browsers, android browsers but the image is not loading at all on the safari even after the scrolling.
I have also tried using 'react-lazy-load', but then also the image is not rendering in safari..
This is how i use the component in my JS file,
<LazyLoadImage alt="" src="someimage.png" />
Can anyone help me to solve this issue?
This was fixed in version 1.3.0:
https://github.com/Aljullu/react-lazy-load-image-component/pull/28