fix: image width not being set properly (#143)

* Fix image width not being set properly

Sometimes it got set to 0 because the original image wasn't loaded yet.

* fix: eslint

Co-authored-by: dicedtomato <35403473+diced@users.noreply.github.com>
This commit is contained in:
relaxtakenotes 2022-06-05 10:18:07 +05:00 committed by GitHub
parent 181833d768
commit 74f3b3f13d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -32,16 +32,16 @@ export default function EmbeddedImage({ image, user, pass }) {
const updateImage = async (url?: string) => { const updateImage = async (url?: string) => {
const imageEl = document.getElementById('image_content') as HTMLImageElement; const imageEl = document.getElementById('image_content') as HTMLImageElement;
const original = new Image; const img = new Image();
original.src = url || dataURL('/r'); img.addEventListener('load', function() {
if (this.naturalWidth > innerWidth) imageEl.width = Math.floor(this.naturalWidth * Math.min((innerHeight / this.naturalHeight), (innerWidth / this.naturalWidth)));
else imageEl.width = this.naturalWidth;
});
img.src = url || dataURL('/r');
if (url) { if (url) {
imageEl.src = url; imageEl.src = url;
} };
// Sometimes gives blank image on first load
if (original.width > innerWidth) imageEl.width = Math.floor(original.width * Math.min((innerHeight / original.height), (innerWidth / original.width)));
else imageEl.width = original.width;
}; };
useEffect(() => { useEffect(() => {