I am working with React. I have a grid with some images, with srcset —srcSet in React—. Each image looks something like this:
<img
class="App-gridImage"
src="https://picsum.photos/1200?image=5" sizes="600px"
srcSet="
https://picsum.photos/200?image=5 200w,
https://picsum.photos/400?image=5 400w,
https://picsum.photos/1200?image=5 1200w,
https://picsum.photos/2400?image=5 2400w,
"
/>
Even using srcSet, the images need some time to load. I just created a sandbox to demonstrate it. You will only notice the delay in the first load; after it, images are cached, so it will be necessary to delete caché to appreciate it again: https://codesandbox.io/s/x21y88q39o
I would like to know if srcset is properly used here, and what other strategies can I use to avoid that problem
Related
As the title says I have multiple images and I want to keep them in a json where it stores the url and from there I want to get image data accordingly.
Here is my codesandbox, I am not sure why it is not showing any images after going through a bunch of answers here.
https://codesandbox.io/s/confident-galois-2pn52
Seems like you forget one level
images
in JSON. Code of IMG in component should looks like this:
<img src={data.images.url} alt={data.images.name} />
You should use the JSON like
<img src={`${data.images.url}`} alt={data.images.name} />
Please update your code. It will start showing the images.
Your JSON structure has images object in it which you are not consuming.
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
Any link I use in Reactjs is showing comment. I'm using VSCode Editor. I'm new to React...it can be silly...sorry for that.
I'm sharing two images here.In the tag, src="{link...}" should be shown like this. But in my case (sharing another snapshot including error) it is only consider it as comment and it is not loading any images.
This is my code image...I am stuck with it...I want my code to work like the above code in image (1) shared
Thanks in advance...
You have to use back ticks instead of single or double quotes.
So it's
<img src={`${var}`}
instead of
<img src={'${var}'}
It's a javascript feature called template string. You can find more info about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
It is happening because in src you are using single quotes ,
That's not how it should be done in React.
Use template strings which looks like this ` inside the src ,
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static content.
Here is a Plunker example of it not working in IE11.
Or quick and easy, the actual img html we're using:
<img data-ng-srcset="{{::image.url}}, {{::image.url2x}}" alt="{{::image.name}}"/>
The images or surrounding divs do not have any transitions, shadows or opacity applied.
The html renders fine with angular passing over and rewriting the srcset attribute correctly. The images just do not appear, only the alt tag. Wondering if this could be a call stack issue due to the intermittence of it, maybe a race condition with Picturefill loading before angular finishes a digest or something.
Cheers in advance!
A work around if you use PictureFill in a loop and in a specific case (not on all images of your application), is calling a function that launch PictureFill directly from HTML, after last item loaded (this is not the best practice but fix the IE11 problem) :
<picture><!-- Your image --></picture>
<span ng-if="$last">
{{ controllerAlias.launchPictureFill() }}
</span>
Came across this as a solution: http://tech.endeepak.com/blog/2014/05/03/waiting-for-angularjs-digest-cycle/
var waitForRenderAndDoSomething = function() {
if($http.pendingRequests.length > 0) {
$timeout(waitForRenderAndDoSomething); // Wait for all templates to be loaded
} else {
$window.picturefill();
}
}
$timeout(waitForRenderAndDoSomething);
The only issue that the blog post describes is here, so if anyone has anything better please let me know:
The $http.pendingRequests supposed to be used for debugging purpose only. If angular team decides to remove this, you can implement the same using http interceptors as suggested in this link.
How can I show a spinner or loader gif animation while route is changing from one to another.
I am using ng view like as follows:
<div ng-view class="view-animate">
</div>
I am loading templates from server and also inline. While the HTTP request is pending I need to show the spinner/loader... any snippets?
You can show and hide the loader when location change starts and is completed, respectively.
Here is a plunkr that I have created for this situation. This uses ui-router and is taken from one of the apps that I have created, so it may not be useful as-is, but it will give you an idea on how to approach the problem.
HTML Code inserted below just to keep SO happy...
<ui-view class="view"></ui-view>
<div loader="" class="ng-hide"></div>
I hope it helps.
Abhi.