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?

[Mites-G]

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?

[Mites-G]

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.

[Mites-G]

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!

[Mites-G]

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)

[Mites-G]

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"
  },

[gabriel-henriq]

Any updates on this issue?

[anjum121]

It's working with follow steps.

• Add below code into /config/server.js

module.exports = ({ env }) => ({
  host: env("HOST", "0.0.0.0"),
  port: env.int("PORT", 1337),
  url: env("PUBLIC_URL", "http://localhost:1337"),
});

• Rebuild strapi

npm run build 

• Refresh browser with cache clearing
• When you add new image try using body button.

[Blazing-Mike]

@anjum121 what should the PUBLIC_URL be in this case?

[Blazing-Mike]

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"
  },

@harish2704 does adding this resolution to package.json fix the img src issue

[harish2704]

@harish2704 does adding this resolution to package.json fix the img src issue

@Blazing-Mike : Yes. You can verify this by adding my custom buid as a dependency as I mentioned in the end of my first message

[Blazing-Mike]

@harish2704 i am quite a noob in strapi... What i need clarity on is does add this code block to my package.json solve the issue?

  "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"
  },

[harish2704]

@harish2704 i am quite a noob in strapi... What i need clarity on is does add this code block to my package.json solve the issue?

  "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"
  },

@Blazing-Mike : Yes bro. It resolved the issue at the time of my first comment. I am not sure about the current situation .
But you can verify this by simply trying out

[Makskokhtenko]

I found the answer on the CKEditor Plugin page, so you just need to do this:

If you use default upload provider and you want prefix img url with api path you need to add baseURL in api.js file (config/api.js)

module.exports = { rest: { defaultLimit: 25, maxLimit: 100, withCount: true, }, baseURL: 'http://localhost:1337' };

Then rebuild and restart

[pmeet862]

I found the answer on the CKEditor Plugin page, so you just need to do this:

If you use default upload provider and you want prefix img url with api path you need to add baseURL in api.js file (config/api.js)

module.exports = { rest: { defaultLimit: 25, maxLimit: 100, withCount: true, }, baseURL: 'http://localhost:1337' };

Then rebuild and restart

you have to re-upload the image after doing this.

[gilzonme]

Adding the url parameter with public url in config/server.js solves the issue

module.exports = ({ env }) => ({
  url:"https://cms.example.com",
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  app: {
    keys: env.array('APP_KEYS'),
  },
});

[kirwako]

you can use this strapi plugin
that prepend public url/media prefix to your media URL in api's URL
it works well and it will your problem
it converts the URLs from /uploads/* to https://your-media-link.com/uploads/*
https://www.npmjs.com/package/strapi-plugin-media-prefix