netresearch / t3x-rte_ckeditor_image

Image support in CKEditor for the TYPO3 ecosystem

Image support for CKEditor for TYPO3

This extension adds the TYPO3 image browser to CKEditor.
Add issues or explore the project on GitHub.

• Same image handling as rtehtmlarea (magic images, usual RTE TSConfig supported)
• Image browser as usual in e.g. FAL file selector
• Dialog for changing width, height, alt and title (aspect ratio automatically maintained)

Installation

1. Install the extension

   1. with composer from packagist

      composer req netresearch/rte-ckeditor-image

2. Add a preset for rte_ckeditor or override the default one (as below):

   <?php
   // EXT:my_ext/ext_localconf.php`
   $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:my_ext/Configuration/RTE/Default.yaml';

   # EXT:my_ext/Configuration/RTE/Default.yaml
   imports:
     # Import default RTE config (for example)
     - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }
     # Import the image plugin configuration
     - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }
   
   editor:
     config:
       # RTE default config removes image plugin - restore it:
       removePlugins: null
       toolbar:
         items:
           - '|'
           - insertImage

3. Enable RTE config preset (e.g. default)

   # Page TSConfig
   RTE.default.preset = default
   

4. Include extension Static Template file

   1. go to Template » Info/Modify » Edit whole template record » Includes
   2. choose CKEditor Image Support for Include static (from extensions) before the Fluid Styled content

Configuration

(optional) Configure the Extension Configuration for this extension:

fetchExternalImages: By default, if an img source is an external URL, this image will be fetched and uploaded to the current BE users uploads folder. The default behaviour can be turned off with this option.

Maximum width/height

The maximum dimensions relate to the configuration for magic images which have to be set in Page TSConfig:

# Page TSConfig
RTE.default.buttons.image.options.magic {
    # Default: 300
    maxWidth = 1020
    # Default: 1000
    maxHeight = 800
}

Current versions of TYPO3 won't render TSConfig settings correctly out of custom template extensions (see the corresponding T3 bug: https://forge.typo3.org/issues/87068). In this case just add the settings to root page config.

Usage as lightbox with fluid_styled_content

# Template Constants
styles.content.textmedia.linkWrap.lightboxEnabled = 1

Configure a default css class for every image

# TS Setup

lib.parseFunc_RTE {
    // default class for images in bodytext:
    nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib.class {
      default = my-custom-class
    }
}

Image lazyload support

The extension supports TYPO3 lazyload handling (fluid_styled_content) for native browser lazyload.

# Template Constants type=options[lazy,eager,auto]
styles.content.image.lazyLoading = lazy

Allowed extensions

By default, the extensions from $TYPO3_CONF_VARS['GFX']['imagefile_ext'] are allowed. However, you can override this for CKEditor by adding the following to your YAML configuration:

editor:
  externalPlugins:
      typo3image:
        allowedExtensions: "jpg,jpeg,png"

Deployment

• developed on GitHub
• composer repository
• new version will automatically be uploaded to TER via Github Action when creating a new Github release

t3x-rte_ckeditor_image's Issues

data-htmlarea-zoom="true" don't work

In Line 199 $GLOBALS['TSFE']->tmpl->setup['lib.']['contentElement.']['settings.']['media.']['popup.']:

Array
(
[bodyTag] =>
[wrap] => |
[width] => 1024
[height] => {$styles.content.textmedia.linkWrap.height}
[crop.] => Array
(
[data] => file:current:crop
)

[JSwindow] => 1
[JSwindow.] => Array
    (
        [newWindow] => 0
        [if.] => Array
            (
                [isFalse] => 1
            )

    )

[directImageLink] => 1
[linkParams.] => Array
    (
        [ATagParams.] => Array
            (
                [dataWrap] => class="lightbox" title="{file:current:title}" rel="lightbox[{register:content_uid}]"
            )

    )

)

The Callback is only a Image.
lightbox[{register:content_uid}] is a Bug in Group-Function: https://forge.typo3.org/issues/72779 (https://gist.github.com/Kitzberger/acfc630c0ea9a430c875af3fbe79a724)

Thanks for Infos.

[Feature] TYPO3 file browser compatibility

I'm not sure how much this extension bases on the official Image addon for CKEditor (https://ckeditor.com/addon/image). Said image addon seems to be able to integrate with external file managers (such as TYPO3's file browser).
It would be great if you could add a "Browse" button that enables people to select an image from the TYPO3 image browser.

invalid composer.json in master

The netresearch/rte-ckeditor-image package of which you are a maintainer has
failed to update due to invalid data contained in your composer.json.
Please address this as soon as possible since the package stopped updating.

It is recommended that you use composer validate to check for errors when you
change your composer.json.

Below is the full update log which should highlight errors as
"Skipped branch ...":

[Composer\Repository\InvalidRepositoryException]: Some branches contained invalid data and were discarded, it is advised to review the log and fix any issues present in branches

Reading composer.json of netresearch/rte-ckeditor-image (v9.0.3)
Found cached composer.json of netresearch/rte-ckeditor-image (v9.0.3)
Reading composer.json of netresearch/rte-ckeditor-image (v9.0.2)
Found cached composer.json of netresearch/rte-ckeditor-image (v9.0.2)
Reading composer.json of netresearch/rte-ckeditor-image (v9.0.1)
Found cached composer.json of netresearch/rte-ckeditor-image (v9.0.1)
Reading composer.json of netresearch/rte-ckeditor-image (v9.0.0)
Found cached composer.json of netresearch/rte-ckeditor-image (v9.0.0)
Reading composer.json of netresearch/rte-ckeditor-image (v8.9.0)
Found cached composer.json of netresearch/rte-ckeditor-image (v8.9.0)
Reading composer.json of netresearch/rte-ckeditor-image (v8.8.0)
Found cached composer.json of netresearch/rte-ckeditor-image (v8.8.0)
Reading composer.json of netresearch/rte-ckeditor-image (v8.7.8)
Found cached composer.json of netresearch/rte-ckeditor-image (v8.7.8)
Reading composer.json of netresearch/rte-ckeditor-image (v8.7.7)
Found cached composer.json of netresearch/rte-ckeditor-image (v8.7.7)
Reading composer.json of netresearch/rte-ckeditor-image (v8.7.6)
Found cached composer.json of netresearch/rte-ckeditor-image (v8.7.6)
Reading composer.json of netresearch/rte-ckeditor-image (v8.7.5)
Found cached composer.json of netresearch/rte-ckeditor-image (v8.7.5)
Reading composer.json of netresearch/rte-ckeditor-image (v8.7.4)
Found cached composer.json of netresearch/rte-ckeditor-image (v8.7.4)
Reading composer.json of netresearch/rte-ckeditor-image (v8.7.3)
Found cached composer.json of netresearch/rte-ckeditor-image (v8.7.3)
Reading composer.json of netresearch/rte-ckeditor-image (v8.7.2)
Found cached composer.json of netresearch/rte-ckeditor-image (v8.7.2)
Reading composer.json of netresearch/rte-ckeditor-image (v8.7.1)
Found cached composer.json of netresearch/rte-ckeditor-image (v8.7.1)
Reading composer.json of netresearch/rte-ckeditor-image (TYPO3_8.7.x)
Found cached composer.json of netresearch/rte-ckeditor-image (dev-TYPO3_8.7.x)
Reading composer.json of netresearch/rte-ckeditor-image (dev-TYPO3_9.x)
Found cached composer.json of netresearch/rte-ckeditor-image (dev-dev-TYPO3_9.x)
Reading composer.json of netresearch/rte-ckeditor-image (master)
Importing branch master (dev-master)
Skipped branch master, Invalid package information:
Deprecation warning: replace.rte_ckeditor_image is invalid, it should have a vendor name, a forward slash, and a package name. The vendor and package name can be words separated by -, . or _. The complete name should match "a-z0-9/a-z0-9". Make sure you fix this as Composer 2.0 will error.

Reading composer.json of netresearch/rte-ckeditor-image (9.x)
Found cached composer.json of netresearch/rte-ckeditor-image (9.x-dev)

Show images in fce preview

missing / desired features

hello,
this issue should better be placed to pull requests - but becuase of reasons i don' t know, i can't create one.

in the rtehemlarea i achived it to get nearly the same output like using normal images by using the features of the extra-static-template of the htmlarea, my own amateurish typoscript and javascript. It would be great, if i can get achive a similar result with the ckeditor. to become a little bit more speicific:

• the editor should have the opportunity to specify margin/padding for the image/figure in the insert-dialog.
• the image-tag should be inside of a figure-tag,
• which should also include an figcaption.

thanks a lot

Add tags to the repo

Would be nice to add some github tags:

• ckeditor-plugin
• typo3cms-extension

...for example :)

[feature] Add image description field

Is it possible to add the image description field below title and alternative?
Or is there a reason, that this field is not available?

strange behaviour for links in 8.7.6

Is' me again - i saw you solved the problem with 'no file object' (#20) in version 8.7.6, so i updated immediately. at first glance everythins seem to work fine bt then i noticed a strage effect: every link is rendered twice with wrong markup. it happens everywhere, not only on content elements or pages with ckeditor-images.

here is an example:

Kontakt

Impressum

Datenschutz

Inhaltsverzeichnis

Different "Image Properties" dialogs

After creating an image, there are two different ways to open the Image Properties dialog.
But depending on the method to open it, the dialog is not the same.

First way is over the context menu (right click on the image) and select "Image Properties", then I get this dialog:

When using the way to just doubleclick on the image, I get the following dialog:

After a link was added to the dialog through the latter dialog, the link dialog is opened on double click.
Also, when adding the link, the image is doubled in the editor.

Enlarge on Click with "css sytled content" - does not work

Hi,

i used "css_styled_content" als rendering engine.
With this renderer the function "Enlarge on Click" does not work, the image was linked to the original image.

With "fluid_styled_content" it works.

Can you help me ? 🙋‍♂️

9.0.0 broken due to invalid composer.json

Current master and tag 9.0.0 is broken due to invalid composer.json.

first select-image-rendering

There is a little bit of a logic error (in the JS) anyway
Currently it like this:

1. Select picture
2. Rendering
3. Dialog
4. Insert original image

the order should be like this:

1. Select picture
2. Get picture info (FileObject) (Ajax / SelectImageController.php ->getinfos)
3. Dialog with width, title, description
4. "again" ajax with rendering (Ajax / SelectImageController.php -> processImage) would then return the generated image.

As it is now, the original image is inserted the first time, only after saving the proccessed file appears.

Generated code is not portable / deleting sys_file_processedfile breaks

Also relevant: #32

Condition/Environment:

• TYPO3 9.5.8
• rte_ckeditor_image 9.0.2
• fal_securedownload 2.2.1 (maybe reproducible without, but haven't tested)
• One text CE with one image inserted with rte_ckeditor_image
• Non-public file storage

The main reason i write this issue is, that when the URL/Domain changes, images won't show up in the backend anymore, because the generated TYPO3-dumpFile for non-public storages includes the domain.
The other problem is sys_file_processedfile. The image shown is a processed file and upon deleting the row for the preview the image also won't show up in the backend.

A possible solution could be not using TYPO3's FAL getPublicUrl mechanism but adding an own eID script that handles these images in the backend to e.g. rerender processed files if they are missing.

rteckeditorimage-title = null

If I add a picture and edit it afterwards (right mousekey -> edit image)
rteckeditorimage-title and rteckeditorimage-old inputs was NULL.

Error: no file object in title

lib.contentElement.settings.media.popup.linkParams.ATagParams.dataWrap = class="lightbox" title="{file:current:title}" rel="lightbox[{register:content_uid}]"

file:current:title says Error: no file object.
I think no refernce in imageLinkWrap.

Thanks

Default width / height not working in BE

Hello

First thank you for this plugin. It is exactly what I was looking for.

I was trying to configure the default image width and height in the Backend.
According to the docs, it can be done with Page TSConfig.
This setting only works in the FE though, but not the BE. So the editor still defaults to 300px and does not allow higher values.

After some debugging I found that the Editor can be changed with settings in the YAML file, but this seems to be not intended, because the config has to be on the wrong level and needs to have dots in the end.
I got it working with this for now:

editor:
  ...
buttons.:
  image.:
    options.:
      magic.:
        maxWidth: 924
        maxHeight: 924

In my opinion the config should either be taken from Page TSConfig or should be somewhere in editor and without the trailing dots.

Versions:

• TYPO3: 8.7.1
• t3x-rte_ckeditor_image: 8.7.1 (installed with composer from this repository)

SelectImageController::97

no:
'url' => $this->prettifyImgUrl($processedFile->getPublicUrl()),

ok:
'url' => $this->prettifyImgUrl($file->getPublicUrl()),

Wrong image path after saving

I'm using latest TYPO3 8.7.9 and latest version of rte_ckeditor_image 8.7.4.

When inserting an image, everything works fine. But after saving the content element, the path to the image is wrong.

Before saving:
<img data-htmlarea-file-table="sys_file" data-htmlarea-file-uid="93" height="151" src="../fileadmin/user_upload/00fde30303.jpg" width="279" />
After saving:
<img data-htmlarea-file-table="sys_file" data-htmlarea-file-uid="93" height="151" src="http://domain.de/web/../fileadmin/user_upload/00fde30303.jpg" width="279" />

When I change line 41 in typ3image.js from
src: '../' + img.processed.url,
to
src: '/' + img.processed.url,
it works.

PS: When using the function clickenlarge, it is neccesary to add these lines to the Setup-TS: lib.contentElement.settings.media.popup.enable = 1
Maybe this can be added to the documentation?

All the best
Michael

Class 'Netresearch\RteCKEditorImage\Controller\SelectImageController' not found

Installation worked fine. When I click the Image icon in the RTE, I'm greeted with this message:

Looked around the usual places but could not find an answer. Anybody know how to fix that?

That's the error message inside the Log:

Core: Exception handler (WEB): Uncaught TYPO3 Exception: Class 'Netresearch\RteCKEditorImage\Controller\SelectImageController' not found | Error thrown in file /var/www/vhosts/domain.tld/typo3_src-8.7.22/typo3/sysext/core/Classes/Utility/GeneralUtility.php in line 3963. Requested URL: https://www.domain.tld/typo3/index.php?route=%2Frte%2Fwizard%2Fselectimage&token=--AnonymizedToken--&P%5Btable%5D=tt_news&P%5Buid%5D=16953&P%5BfieldName%5D=bodytext&P%5BrecordType%5D=0&P%5Bpid%5D=6953&P%5BrichtextConfigurationName%5D=default&contentsLanguage=en&editorId=cke_1&bparams=data_tt_news__16953__bodytext_|ckeditor|typo3image||data_tt_news__16953__bodytext_|||onSelected

Unchecking enlarge on click not working

Use Case in
TYPO3 9.5.9 - LTS
rte_ckeditor_image - 9.0.3
Added an image with a popup in the ckeditor by enabling enlarge on click checkbox. It saves correctly in the CKEditor with the data-zoom attribute as true.
But when unchecking enlarge on click this data-zoom attribute persists & unable to save the same image without a popup.

No frontend rendering of the images

Hi.
I have TYPO3 9.5.9
rte_ckeditor_image 9.0.3
Backend everything ok. I can insert and edit images. They are kept after save.
But no FE output...

CKeditor wont render proccessed image if i set external link on image

Hello we have problem with rendering images in new CKeditor.

If we delete processed image from fileadmin/processed/.... we get 404 error in FE nad BE (doesent metter if we delete it over SSH or over install tool -> Clean up -> Clear processed files) - all filepermision are OK.
Image wont regenerate in FE and BE. If we go in problematic content and hit "Save" buttun again, image regenerate in BE and FE.

Can anyone help?

The problem only exsist if we set image some url over "link handler" (Exterlnal URL).

If we have only image with no clickable external url - image regenerate automatically.

Alt and Title not taken from the image metadata

When not adding title and alt in the image dialogue, the frontend doesn't show the title and alt attribute values, while they are configured in the Typo3 filelist (and even shown in the dialogue)

Leads to

data-htmlarea attributes shown on frontend

The properties data-htmlarea-file-table and data-htmlarea-file-uid are shown in the frontend. They serve no purpose there and should be removed.

Take max width into account on save

Since TYPO3 9 $magicImageService->createMagicImage(...) does not use max width/height values for image rendering

[BUG - or Config Problem] <img... gets deleted after save

Everything works fine, but when i press save image gets deleted :(

data-title="Error: no file object"

i have updated to rte_ckeditor_image 8.7.3 and added

lib.contentElement.settings.media.popup.enable = 1

to my setup.

the lightbox works but the a-tag shows data-title="Error: no file object" (unimportant if filled or not).

Maximum width/height doesn't get respected

I set up fresh TYPO3 8.7.4 with rte_ckeditor_image.

I put

# Page TSConfig
RTE.default.buttons.image.options.magic {
    maxWidth = 1020  # Default: 300
    maxHeight = 800  # Default: 1000
}

in my Page TSConfig, but when I try to insert an image I cannot increase the image width more than 300.

Did I do something wrong?

Thank you!

ntent

"9.0.0" tag does comply tag format rules, should be "v9.0.0"

"9.0.0" tag does comply tag format rules, should be "v9.0.0"

Reference index not updated

When embedding an image using this extension, the reference counter for the image is not increased. This is essential to prevent accidental deletes of images embedded via RTE.

Crop Images

I think it would be useful to add a checkbox after selecting the image. [x] Crop.
This should also disable the proportional ratio of the numbers.
In PHP, we can address the whole with 200C.

What do you mean?

[documentation] - add note about TSConfig problem when using your own preset

so far, due to this issue: https://forge.typo3.org/issues/81381 it is not possible to customize the TSConfig, if you are using your own preset. The workaround is mimic the TSConfig structure inside the .yaml file, like this:

"buttons.":
  "image.":
    "options.":
      "magic.":
        maxWidth: 1020

maybe it should be mentioned in the manual (I know, it should be just temporary)

8.7.7 Call to undefined method DOMNodeList::count()

after update to 8.7.7 (TYPO3 8.7.16) i get the following error-message
Call to undefined method DOMNodeList::count()

"Clear processed files" breaks images

According to the short text associated with the "Clear process files"-button, all processed images should be recreated upon pagevisit:

The File Abstraction Layer stores a database record for every file it needs to process. (e.g. image thumbnails) In case you modified some graphics settings (All Configuration [GFX]) and you need all processed files to get regenerated, you can use this tool to remove the existing ones. The new processed files are created once they are needed.

However, if you click on said button, all ckeditor images break and won't be regenerated when visiting the page in the frontend. Only by saving the content element again in the backend, it does get regenerated, given the original file (see data-htmlarea-file-uid attribute) still exists.

It would be best if these "magic" images are regenerated upon page request instead of within the backend editor.

Typo3 processes this content already to replace links with the correct paths (e.g. t3://page?uid=1). A similar behavior might be possible to be implemented, reusing the same syntax (e.g. t3://file?uid=123). That way, the original file reference is properly preserved, the processed file and its path gets generated upon request and can still be cached. Somewhat similar to how the f:image viewhelper works, tho I dunno how easy/hard/possible this is. Either way, the current behavior is too destructive.

click-enlarge not working (no different rendering)

So i'm importing an image and it renders

<p><img data-htmlarea-file-table="sys_file" data-htmlarea-file-uid="201" data-htmlarea-zoom="true" height="574" src="../fileadmin/_processed_/5/e/csm_bg_location_f9014553ff.jpg" width="1020" /></p>

After saving the element, it will render it to:

<p><img alt="" height="574" src="https://heinekingmedia.de/../fileadmin/_processed_/5/e/csm_bg_location_f9014553ff.jpg" width="1020" /></p>

So there are no informations anymore to use any lightbox or even a simple -Tag to open the image full-size in a new tab.

Am I missing something? I read some threads here already but nothing helped.

TYPO3: 8.7.17
rte_ckeditor_image: 8.7.4

CKEditor in TYPO3 9.5 does not work with Internet Explorer 11

If you want to edit a content section in Internet Explorer 11, the CKEditor throws an error in the Javascript "typo3image.js". The CKEditor does not appear and editing is not possible.

Used version:
TYPO3 9.5.9
rte_ckeditor_image 9.0.3

TYPO3 9.3

Is there any update for TYPO3 9.3 in the pipe?

Handle linked images

Continues the approach of #35.
We need to find a way to render only the images when wrapped into a link.

tt_content.stdWrap.parseFunc
or
lib.parseFunc.tags.img AND lib.parseFunc.tags.a

width/height not saved when changed by context menu

When I change width/height by the context menu, the image path changes from absolute to relative. When saving, it reverts to the original image dimensions (and the original, absolute path).

This doesn't happen, when I change width/height in the other properties dialog by double clicking the image: It keeps the path untouched and the edited dimensions are saved.

replaced images are not replaced on ckeditor

• TYPO3 9.5.8
• rte_ckeditor_image 9.0.4

If you replace an images on Filelist the images aren't changed on ckeditor, if the image is already on a page.

Internet Explorer 11 - BUG - adding link on image

Hello,

if we want to add a link on image using Internet Explorer 11 link is added not on image, but before image - look at screenshot. Can you fix this please? On Chrome and Firefox works OK.

click-enlarge

hello,
is it possible to enrich this very usefull extension by enableing the click-enlarge feature?
thanks

Not possible to place images in RichText editor

My installation:
TYPO3 9.5.5
Extensions:
rte_ckeditor 9.5.5
rte_ckeditor_image 9.0.1

It is not possible to insert an image. If you are clicking on image symbol, the window with the images are opening. But the function "Import selection" is not working!!

Not possible to place images intext left/right

Regarding images in CKEditor, I used the extension "rte_ckeditor_image" and everything works. But is it possible to place the image intext right/left? Now I can only able to add the image above or below the paragraph. It would be great if you can add this intext functionality to the extension. I think it is a missing feature.
Thank you.

jQuery.Deferred Exception when using Internet Explorer (IE)

It is not possible to embed an image when using IE.

I come until the step where I can choose the image. When I choose the image, the window disappears and I can see the rich text again. Here is what shows up in the JS console:

The website is running the latest release of TYPO3 v8, 8.7.4.

Version 8.7.6 breaks "Umlauts" in links

We have pi_flexform fields with links that contain umlauts (äöü) in the link label. After updating the rte_ckeditor_image plugin from 8.7.5 to 8.7.6 the utf8-encoding of all this umlauts is displayed wrong (i.e. "für "instead of "für"). Only links are affected.

The text inside the database is encoded correctly ("für").

Tested with TYPO3 8.7.20 and TYPO3 8.7.19 with php 7.1.24 on CentOs

Custom width & height not respected in FE if set within an extension

Hello,

I configured a custom width & height for my images within the default.tsconfig file of my template extension. As long as I was logged in (BE) everything worked fine. But without an active backend session my images always were rendered with a maximum width of 300px.

There is this bug in TYPO3 which does not respect extension TSConfig in FE: https://forge.typo3.org/issues/87068

When putting the "RTE.default.buttons.image.options.magic" config into my root page it worked immediately without having an active BE session. By the way, the maximum width of 300px came from the MagicImageService class.

Maybe this helps somebody and maybe even makes it into the documentation. And maybe this also was the issue in #16.

Issue with Image properties

Hi,

I'm using TYPO3 8.7.1

When i right click on an image, and then click on Image properties, i always obtain the File selector modal, not the image properties. I'm using the last version of your extension (8.7.1)

Thanks a lot

Broken image if inserted from non-publicly available file storage

When an image is embedded into the RTE from a file storage which is not publicly accessible (and in my case with EXT:fal_securedownload enabled but should not be related):

• The image is shown in Frontend when the user is currently logged into the Backend
• The image is not shown, in fact its markup is wrong

The image is embedded as following in RTE:

<p><img alt="" data-htmlarea-file-table="sys_file" data-htmlarea-file-uid="30428" height="145" src="http://www.domain.tld/fileadmin/user_upload/1.jpg" width="145" /></p>

Now, protect file storage "fileadmin":

• Go to pid 0 with Web > List
• Edit file storage for fileadmin
• Under Access capabilities, uncheck "Is publicly available?" and save

Go back to the record, remove the existing picture and insert it again.

Image is now embedded as following in RTE:

<img data-htmlarea-file-table="sys_file" data-htmlarea-file-uid="30428" height="145" src="..//typo3/index.php?ajaxID=FalSecuredownload%3A%3ApublicUrl&amp;eID=dumpFile&amp;t=f&amp;f=30428&amp;token=bb5e48e985d21573de990c36120e2bad5e625d3e&amp;ajaxToken=22f5be309fb46edc28547a08adc89c88e09bead7" width="145" />

In Frontend, when authenticated, every works fine, the src for HTML tag img is:

/typo3/index.php?ajaxID=FalSecuredownload%3A%3ApublicUrl&eID=dumpFile&t=f&f=30428&token=bb5e48e985d21573de990c36120e2bad5e625d3e&ajaxToken=22f5be309fb46edc28547a08adc89c88e09bead7

This is thus a Backend link, which works since authenticated, however it fails when not authenticated.

Instead, a valid src for HTML tag img should be of the form:

/index.php?eID=dumpFile&t=p&p=45&token=caf8079ff290d341498377ebd78e0bbac92f5f2b