How to add the server url in the image src?

[Rurtzane]

Hello,

Thanks for this wonderful plugin :)

I want to display the uploaded images on my site but I cannot. Because the URL path is wrong. I get something like "/uploads/test.png".

How can I change the path to put my server path before "/ uploads /" please?

[too-soon]

Edit: opening ./config/server.js on strapi folder, and adding url: env('PUBLIC_URL', 'http://localhost:1337'), did the trick for me.

[Rurtzane]

Hello,

Thank you for your reply!
Unfortunately, it doesn't work :(

When I get a strapi image I always have "/uploads/..." instead of having "http://localhost:20001/uploads/...".
I don't know if it's possible to make this work.

[roslovets]

Hi! The plugin uses ckeditor5-strapi-upload-plugin to work with images. Can the problem be on its side?

[Rurtzane]

Hi !

I don't know. It's possible. I want to display the images of ckeditor on my site.

Like that :

[roslovets]

Seems like it's default Strapi behaviour. Does default WISYWIG editor provide full image URL?

[roslovets]

BTW don't you forget to rebuild Strapi after this trick?

[too-soon]

Seems like it's default Strapi behaviour. Does default WISYWIG editor provide full image URL?

const url = prefixFileUrlWithBackendUrl(data.url);

This function seems to return nothing if you don't have an url set on your server object.

[too-soon]

Hello,

Thank you for your reply!
Unfortunately, it doesn't work :(

When I get a strapi image I always have "/uploads/..." instead of having "http://localhost:20001/uploads/...".
I don't know if it's possible to make this work.

Please try rebuilding your admin and also forcing a refresh on your CKEditor page(CTRL + R on Chrome), I had some caching issues.

[Rurtzane]

I just rebuilt and clear the cache it doesn't work.
When I use ckeditor to host an image in a rich text field and i interpret that rich field on my forehead. I get "/uploads/" all the time.

My server config :

My rich text :

I am using 'v-html' to interpret the html text I get from strapi.

EDIT: I think I will use a 'computed' to fix this problem. Anyway, thanks for your help!

[too-soon]

I just rebuilt and clear the cache it doesn't work.
When I use ckeditor to host an image in a rich text field and i interpret that rich field on my forehead. I get "/uploads/" all the time.

My server config :

My rich text :

I am using 'v-html' to interpret the html text I get from strapi.

EDIT: I think I will use a 'computed' to fix this problem. Anyway, thanks for your help!

Yup, your config seems correct.

As a workaround, you can hardcode this line until we figure out a better fix.

[roslovets]

This issue can be related
strapi/strapi#9314

[roslovets]

Seems like answer
strapi/strapi#9176 (comment)

[too-soon]

I appreciate your help investigating the issue, @roslovets.
As far as I understand, there's very little documentation to the strapi core, which makes word of mouth much more powerful.

[harish2704]

IMHO, this is an bug caused by one of the indirect upstream dependency of this project .

So, to resolve this issue,

1. First , the package https://github.com/gtomato/ckeditor5-strapi-upload-plugin should add an option to specify uploaded_media_prefix ( for eg: media_prefix in addition to uploadUrl option )
2. Then, the package https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg ( which is a direct dependency of this project ) need to specify the above mentioned option while initializing Ckeditor widget . Since it is a pre-compiled dependecy, After the update, it should be re-build and release the package .
3. After that, This package need to update the depenedency version and use the bug fixed version of the ckeditor build

I think, it will take time for all these things to happen, so I did a quick fix,

Ie, I derived the media_prefix from uploadUrl and use it in the https://github.com/gtomato/ckeditor5-strapi-upload-plugin .

I did that, rebuiled the ckeditor and published the release.

For those who got stuck at this issue, a quick but dirty solution will be to add the following to your package.json.

  "resolutions": {
    "ckeditor5-build-strapi-wysiwyg": "https://github.com/harish2704/ckeditor5-build-strapi-wysiwyg/releases/download/v1.13.0-fixurlprefix/ckeditor5-build-strapi-wysiwyg-v1.13.0.tgz"
  },