Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

5
  • 1
    I deleted my answer as it doesn't work that way as I look at the documentation. There's two things you can do to lazy load this. You can lazy load the COMPONENT (not the source of the img) or you can use native image loading by adding the loading="lazy" attribute. I'm not leaving this as an answer as I am unsure as to which direction you're trying to go and haven't actually tested this solution. Commented Sep 12, 2020 at 2:13
  • loading="lazy" is to load the image only if is in the viewport. what I´m trying to achieve is different. is dynamically load images. is a different thing. but thank you Commented Sep 12, 2020 at 16:21
  • You can load SVG inline, depending on your build tool. For many such tools, this is the thing to do. If not, that same link contains some somewhat manual alternatives, too. Commented Oct 12, 2020 at 16:17
  • What in particular isn't efficient enough about how things are handled normally via <img src={src}/>? Because it won't actually run a fetch for the image until the img is rendered. Commented Oct 12, 2020 at 17:43
  • dynamically load images - is very ambiguous statement. What is it that you want to do? If you want to lazy load the images, loading="lazy" might help you out and if you want to implement some sort of code splitting then Lazy and Suspense are the one to be used. @technicallynick's comment also makes a lot of sense. It will help if you can explain what is the end result you want. Commented Oct 18, 2020 at 13:00