Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create guide for avoiding image flashing #1311

Closed
alexreardon opened this issue May 17, 2019 · 2 comments
Closed

Create guide for avoiding image flashing #1311

alexreardon opened this issue May 17, 2019 · 2 comments
Labels
docs 📖

Comments

@alexreardon
Copy link
Collaborator

alexreardon commented May 17, 2019 •
edited
Loading

Summary:

If your Draggable contains an image then you can experience 'flashing' when:

(or any other time the Draggable element is recreated). This is normal browser behaviour and is not caused by react-beautiful-dnd.

This can cause a flash:

<img src="/path/to/my/image.jpg />

The issue is that the server makes a request to this image which can take a bit of time to resolve.

To get around this you can

  • inline your images with base64 encoding (with url-loader)
  • use headers (need more details)
@alexreardon alexreardon mentioned this issue May 17, 2019
Closed
@alexreardon
Copy link
Collaborator Author

#1317

@alexreardon alexreardon mentioned this issue Jun 27, 2019
Closed
@alexreardon
Copy link
Collaborator Author

This has shipped in #1487. See our new guide

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
docs 📖
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@alexreardon