.heic files are not shown after click

[Borisvl]

Lychee version

v6.0.1

Which PHP version are you using?

PHP 8.3

Detailed description of the problem

I have add .heic files as raw image format in the settings. When I upload a file via the web interface, it gets processed successfully. I can see the preview image in the album, but when I click on it, it just shows a broken image in Safari.

Steps to reproduce the issue

1. Goto settings and enable HEIC images in the raw formats
2. Generate a new album and upload a .heic image to it
3. Click on the image in the album preview.

Diagnostics [REQUIRED]

Lychee Version (release):                  6.0.1
DB Version:                                6.0.1
composer install:                          --no-dev
APP_ENV:                                   production
APP_DEBUG:                                 false
APP_URL:                                   set
APP_DIR:                                   default
LOG_VIEWER_ENABLED:                        true
VUEJS_ENABLED:                             true
PHOTO_PIPES:                               true
System:                                    Linux
PHP Version:                               8.3.13
PHP User agent:                            Lychee/4 (https://lycheeorg.github.io/)
Timezone:                                  Europe/Berlin
Max uploaded file size:                    128M
Max post size:                             128M
Chunk size:                                51.20 MB
Max execution time:                        180
SQLite Version:                            3.34.1
exec() Available:                          yes
Imagick Available:                         1
Imagick Enabled:                           1
Imagick Version:                           1691
GD Version:                                bundled (2.1.0 compatible)
Number of foreign key:                     11 found.

		
Space
Load space usage.
Configuration
version:                                   060001
check_for_updates:                         0
sorting_photos_col:                        taken_at
sorting_photos_order:                      ASC
sorting_albums_col:                        max_taken_at
sorting_albums_order:                      ASC
imagick:                                   1
skip_duplicates:                           1
small_max_width:                           0
small_max_height:                          360
medium_max_width:                          1920
medium_max_height:                         1080
lang:                                      de
image_overlay_type:                        desc
default_license:                           none
compression_quality:                       90
grants_full_photo_access:                  0
delete_imported:                           0
mod_frame_enabled:                         1
mod_frame_refresh:                         30
thumb_2x:                                  1
small_2x:                                  1
medium_2x:                                 1
landing_page_enable:                       0
force_migration_in_production:             0
search_public:                             0
hide_version_number:                       1
SL_enable:                                 0
SL_for_admin:                              0
recent_age:                                1
grants_download:                           0
photos_wraparound:                         1
map_display:                               0
zip64:                                     1
map_display_public:                        0
map_provider:                              Wikimedia
force_32bit_ids:                           0
map_include_subalbums:                     0
update_check_every_days:                   3
has_exiftool:                              0
share_button_visible:                      0
import_via_symlink:                        0
has_ffmpeg:                                0
location_decoding:                         0
location_decoding_timeout:                 30
location_show:                             1
location_show_public:                      0
rss_enable:                                0
rss_recent_days:                           7
rss_max_items:                             100
prefer_available_xmp_metadata:             0
editor_enabled:                            1
lossless_optimization:                     0
swipe_tolerance_x:                         150
swipe_tolerance_y:                         250
local_takestamp_video_formats:             .avi|.mov
log_max_num_line:                          1000
unlock_password_photos_with_url_param:     0
nsfw_visible:                              1
nsfw_blur:                                 0
nsfw_warning:                              0
nsfw_warning_admin:                        0
nsfw_banner_override:                      
map_display_direction:                     1
album_subtitle_type:                       oldstyle
upload_processing_limit:                   4
new_photos_notification:                   0
legacy_id_redirection:                     1
zip_deflate_level:                         6
default_album_protection:                  1
album_decoration:                          layers
album_decoration_orientation:              row
allow_username_change:                     1
auto_fix_orientation:                      1
use_job_queues:                            0
random_album_id:                           starred
use_last_modified_date_when_no_exif_date:  0
layout:                                    justified
date_format_photo_thumb:                   M j, Y, g:i:s A e
date_format_photo_overlay:                 M j, Y, g:i:s A e
date_format_sidebar_uploaded:              M j, Y, g:i:s A e
date_format_sidebar_taken_at:              M j, Y, g:i:s A e
date_format_hero_min_max:                  F Y
date_format_hero_created_at:               M j, Y, g:i:s A T
date_format_album_thumb:                   M Y
upload_chunk_size:                         0
nsfw_banner_blur_backdrop:                 0
search_pagination_limit:                   1000
search_minimum_length_required:            4
photo_layout_justified_row_height:         320
photo_layout_masonry_column_width:         300
photo_layout_grid_column_width:            250
photo_layout_square_column_width:          200
photo_layout_gap:                          12
display_thumb_album_overlay:               always
display_thumb_photo_overlay:               hover
default_album_thumb_aspect_ratio:          1/1
use_album_compact_header:                  0
login_button_position:                     left
back_button_enabled:                       0
back_button_text:                          Return to Home
current_job_processing_visible:            1
SA_random_thumbs:                          0
job_processing_queue_visible:              1
login_required:                            1
enable_unsorted:                           1
enable_starred:                            1
enable_recent:                             1
enable_on_this_day:                        0
login_required_root_only:                  0
dark_mode_enabled:                         0
show_keybinding_help_popup:                0
show_keybinding_help_button:               1
disable_se_call_for_actions:               1
enable_se_preview:                         0
slideshow_timeout:                         5
keep_original_untouched:                   1
hide_nsfw_in_smart_albums_and_search:      1

Browser & System [REQUIRED]

Linux a2e46 5.10.0-32-amd64 #1 SMP Debian 5.10.223-1 (2024-08-10) x86_64 GNU/Linux

MacOS Safari as browser.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I understand my bug report will be removed if I haven't met the criteria above.

[ildyria]

Hi,

enabling "raw" support in config skip all the processing of such images, this is to allow to upload files like zip, pdf etc.
So yes, this is expected behaviour.

However what is not the expected behaviour, is the broken image in the middle. That needs to be fixed.
(and to clarify, no the .heic will not be displayed).

[Borisvl]

Thanks for your answer. The interesting thing is that during import of the HEIC image, thumb and medium size images are generated. So it would make sense imho, to display them also in the gallery. I think a small change here could solve this:

Lychee/resources/js/composables/photo/basePhoto.ts

Line 72 in 8137557

if (photo.value?.precomputed.is_raw) {

Basically, adding the same check if the medium size preview exists to theis_raw case:

const imageViewMode = computed(() => {
		if (photo.value?.precomputed.is_video) {
			return 0;
		}
		if (photo.value?.precomputed.is_raw) {
			if (photo.value?.size_variants.medium !== null) {
				return 2;
			}
			return 1;
		}

		if (!photo.value?.precomputed.is_livephoto) {
			if (photo.value?.size_variants.medium !== null) {
				return 2;
			}
			return 3;
		}
		if (photo.value?.size_variants.medium !== null) {
			return 4;
		}
		return 5;
	});

I am no web developer, so I do not have the local dev setup installed to actually test the change, but I tried to directly modify it in Chrome and the image is displayed correctly. I am happy to create a PR if this helps.

[Borisvl]

Thanks for merging it already. 🙌
I will test it once the new version is out!