question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Image] No native "src" property on server side rendered page

See original GitHub issue

Describe the bug Currently while checking image component rendered on server side (in my case using next.js) there’s no src in server side rendered native <image /> tag is this intentionally designed like this? or is there any way to configure this

because this might be a huge impact on SEO as no image will have src

PFB codesandbox describing minimal nextjs sample Edit fast-bush-2nsvz

Expected Behavior have src property on native <image/>

To Reproduce no reproduction required just use component with src

Suggested solution(s) NA

Desktop (please complete the following information):

  • OS: [e.g. iOS] All
  • Browser [e.g. chrome, safari] All
  • Version [e.g. 22] All

Additional context If lazy loading images was the purpose then loading=lazy tag might be useful https://caniuse.com/#feat=loading-lazy-attr

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
mehmetaydogduucommented, May 21, 2020

I solved the issue using fallbackSrc. But it is a bug I think.

0reactions
harshzalavadiyacommented, Jun 23, 2020

Thanks @jmcruzmanalo, using ignoreFallback might be optimal solution

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't show Image in React Native - Stack Overflow
Side note on this issue. Upgrading from React Native 0.63.0 to 0.63.2 fixes an issue where remote images do not display on iOS...
Read more >
Working with images in Next.js - DEV Community ‍ ‍
Rendering images in Next.js for the first time can be frustrating, ... The src attribute takes in a relative or absolute URL path...
Read more >
<img>: The Image Embed element - HTML - MDN Web Docs
The above example shows usage of the <img> element: The src attribute is required, and contains the path to the image you want...
Read more >
A Deep Dive into Native Lazy-Loading for Images and Frames
The initial, server-side HTML response includes an img element without the src attribute so the browser does not load any data.
Read more >
Docs • Svelte
This page contains detailed API reference documentation. ... SvelteKit utilizes Vite to build your code and handle server-side rendering (SSR).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found