src of image saved on base64

[GoOnSummit]

after insert image show relative path but on save to data base they save base64. How can i disable that. I want to keep relative path!
do you have idea?

[ronaldohoch]

Hello and welcome!

You can take a look at documentation: https://grapesjs.com/docs/api/assets.html#assetmanager, you can upload it using the configuration from assetsManager.

https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js#L57

[GoOnSummit]

Thank you @ronaldohoch for you reply!
Yes I did all configuration I need.

But still something.

When I insert the image, the path its inserted like that:
<img id="i32r" data-gjs-type="image" draggable="true" src="https://anydomain.com/media/content/HomepageAssets/F22%20Banner%20Mobile.png" class="gjs-selected">

but on save on database the path change to this:

<img id="i32r" data-gjs-type="image" draggable="true" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik0yLjI4IDNMMSA0LjI3bDIgMlYxOWMwIDEuMS45IDIgMiAyaDEyLjczbDIgMkwyMSAyMS43MiAyLjI4IDNtMi41NSAwTDIxIDE5LjE3VjVhMiAyIDAgMCAwLTItMkg0LjgzTTguNSAxMy41bDIuNSAzIDEtMS4yNUwxNC43MyAxOEg1bDMuNS00LjV6Ij48L3BhdGg+CiAgICAgIDwvc3ZnPg==" class="gjs-selected">

Just want to keep the first with the relative path and I don't know how to disable base64 src encoding?

thanks for you help.

[AlexJHzZ]

Hi, i found my error, hope help you too.

i Was doing src change trought "selected.setAttributes({ 'src': window.location.origin+image.url });"

but the model of image components get the direct attribute of the component object you need to set using: "selected.set({ src: window.location.origin+image.url });"

[GoOnSummit]

Finally It works!
Thank to @AlexJHzZ Thank you!!!! Gracias!

Just add what he said here my code in case someone can help!
`

editor.on('asset:custom', props => {
    //console.log(props);

    // The `props` will contain all the information you need in order to update your UI.
    // props.open (boolean) - Indicates if the Asset Manager is open
    // props.assets (Array<Asset>) - Array of all assets
    // props.types (Array<String>) - Array of asset types requested, eg. ['image'],
    // props.close (Function) - A callback to close the Asset Manager
    // props.remove (Function<Asset>) - A callback to remove an asset
    // props.select (Function<Asset, boolean>) - A callback to select an asset
    // props.container (HTMLElement) - The element where you should append your UI
    openModal();
    // Here you would put the logic to render/update your UI.

    var var_url_image = '';
    const selected    = editor.getSelected();

    // WE INIT THE elfinder PICTURE CONTROL (I was able to use elfinder)
  .......

    selected.set({ src: var_url_image });
    am.close();
});`

[AlexJHzZ]

adding some that a i find before testing background images you need to use: props.select(var_url_image) using the props provided by the assetmanager methods, this method works for images components and components properties (like background images) i think is the proper why to do it, but it was not clear in the docs i think, hope helps you, good luck

[censonalvin]

hello, can you help me? cause i'm also having this kind of trouble, i aleady tried to put the codes above but it is not yet still fix.

[AlexJHzZ]

i Have just the same problem, i have a custom src working on the preview, but calling getHtml() convert the default placeholder image to base64 and replace my src