Prepend media urls (images, files, audios, ) with your public url/media prefix on both Admin Panel and API's just in response without changing the relative path in database

npm install strapi-plugin-media-prefix
# or
yarn add strapi-plugin-media-prefix

Enable the plugin by adding the following lines of code in the file: ./config/plugins.ts

// ./config/plugins.ts
export default () => ({
  "media-prefix": {
    enabled: true,
  },
});

or in the file: ./config/plugins.js

// ./config/plugins.js
module.exports = {
  'media-prefix': {
    enabled: true,
  },
};

The plugin can get the public url/media prefix from the .env file or from the server config file: ./config/server.ts if you don't define the MEDIA_PREFIX key in the .env file

The plugin get the public url/media prefix from .env file using the key MEDIA_PREFIX

so be sure to add MEDIA_PREFIX key in the .env file

#.env
MEDIA_PREFIX=https://kirwako.com/media

The plugin can also get the public url/media prefix from the server config file: ./config/server.ts if you don't define the MEDIA_PREFIX key in the .env file

so be sure to add url key in the server config file

in the file: ./config/server.ts

// ./config/server.ts
export default ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  app: {
    keys: env.array('APP_KEYS'),
  },
  url: env('PUBLIC_URL', 'http://localhost:1337'), // be sure to add this line
});

or in the file: ./config/server.js

// ./config/server.js
module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  app: {
	keys: env.array('APP_KEYS'),
  },
  url: env('PUBLIC_URL', 'http://localhost:1337'), // be sure to add this line
});