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.

Local image not rendering

See original GitHub issue

Describe the bug I am trying to get image from my local path, but the image is not showing in pdf. I believe it should be simple path defination, but tried with allowDangerousPaths in my react project. I am trying to do following:

<Image source="../../assets/ball.jpg" />

Expected behavior Load image from the local path

Screenshots image

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7

github_iconTop GitHub Comments

23reactions
skjo0ccommented, Jul 30, 2020

Only able to do it with data uri

So how exactly did u resolve the issue using data uri?

I imported the image and passed it to src:

import Logo from 'assets/logo.png'
<Image style={styles.image} src={Logo} />
1reaction
Reg011commented, May 14, 2019

You can’t put a relative path. See https://react-pdf.org/components#source-object

Read more comments on GitHub >

github_iconTop Results From Across the Web

React won't load local images - Stack Overflow
Best way to load local images in react is as follows ... anywhere from the project, by just giving '/path_to_image' and no need...
Read more >
How to fix image not showing in an HTML page
How to fix image not showing in an HTML page · Check the src path to of the <img> tag · Check the...
Read more >
Local Images not rendering in React Native Expo FIX
However, this only works when the local image (png, jpg, jpeg, etc.) is included in the same folder as the Image component being...
Read more >
How to display images from local assets/images folder when ...
In this article, we will see how we can load local images when using React. So let's get started. Now, download the images...
Read more >
Why can I not see the images on my website? - Encode.Host
The image file is not located in the same location that is specified in your IMG tag. · The image does not have...
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