Search code examples
reactjsfirebasereact-native-firebasequillreact-quill

React Quill images uploaded are pixelated

What's happening: I'm using react-quill as a text editor and it works well, except when I upload an image via my backend, it renders blurry/pixelated on my frontend.

Expected: Renders with equal quality from backend to frontend.

The following are my results:

backend

frontend

Firebase saves the image as a huuuuuge base 64 number -- over 70k characters.

Does anyone know how to handle this?

Edit: Something I thought of is maybe a custom upload button that would first save the image to firebase storage then replace that base64 string with the path to that image in firebase storage?

Edit2: I'm saving the state of the editor to give to firebase via the backend with content: this.state.editorHtml and do a database.ref().child('articles').set(data). I then render it on the frontend with data.get('content)

Edit3: I'm rendering the images to the frontend with import HTMLView from 'react-native-htmlview' in a tag <HTMLView value: {data.get('content')} />

Solution

  • After a lot of research and aimless debugging, it was not the react-quill giving me issues by saving the image as a huge base64 string. It was actually the react-native-htmlview package that first sets the image props with a height=10 and width=10 by default if the props are not set ahead of time in the htmlToElement.js file. By giving the image a width and height before rendering, it solved my blurriness! Hopefully this helps someone else!