Closed adripo closed 1 month ago
What part of the application doesn't support HEIC? What isn't working? etc.
This request right now is so vague I wouldn't know where to start to even consider fixing it. Further details are required.
What I have found using the images from https://filesamples.com/formats/heic The images open normaly on my computer
Doing some quick research this isn't something we are really in control of unless we convert the files. Digging into the code we simply spit out whatever was given to us into the HTML img tags.
Browser support is limited: https://caniuse.com/heif (apple safari only)
@adripo I don't know if youre in a postiton to check if it works wit safari, but it is currently browser limited unless you convert the images (which can be done very easy using a selfhosted instance of convertX ) Unless you have any ideeas I think the issue can be closed but I will leave that up to the issue creator or repo maintainer.
Apologies for the delayed response. The issue I wanted to highlight is the same one mentioned by @101br03k, where item photos and covers are not visible if the images are in HEIF format. I haven't been able to test this on Safari, but it seems likely that browser limitations are causing the problem.
While I could convert the images before uploading, it's not feasible when capturing pictures directly from the browser during item creation in Homebox. The ideal solution, in my view, would be for Homebox to automatically convert all photos to a widely compatible format like WebP during the upload process. Is this something you can implement and add to the backlog?
Maybe an alternative is to only accept widely supported image formats on the input form:
diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index 24e4f7a..ff40a7a 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -11,7 +11,7 @@
<div class="flex justify-center">
<div>
<label for="photo" class="btn">{{ $t("components.item.create_modal.photo_button") }}</label>
- <input id="photo" type="file" accept="image/*" style="visibility: hidden" @change="previewImage" />
+ <input id="photo" type="file" accept="image/png,image/jpeg,image/gif" style="visibility: hidden" @change="previewImage" />
</div>
<BaseButton class="rounded-r-none" :loading="loading" type="submit">
<template #icon>
I don't have any apple devices so I can't test it, but according to this, it is supposed to work.
EDIT : I opened a PR #227. I tested only non-regression, but as I don't own any apple devices, @adripo your help is welcome to confirm the fix is working !
What is the problem you are trying to solve with this feature?
Using HEIC images format
What is the solution you are proposing?
Support HEIC format
What alternatives have you considered?
No response
Additional context
No response
Contributions