How to return absolute path?

Questions and Answers
1
System Information
  • Strapi Version “strapi”: “3.2.5”,:
  • Operating System Windows 10:
  • Database SQLIte:
  • Node Version Node v12.18.2:
  • NPM Version NPM v6.14.8:
  • Yarn Version Yarn v1.22.5:

My editor is changed to react-quill-js which configured to be able to upload image from local machine. But my problem is when it get called from GET/ it return “Content”: “

<img src=”/uploads/clover_86dfbaa5b8.png">

". It’s kind of hard for frontend to find and append the prefix of the server. So I want to ask where to change the relative path to absolute path?

image
image1791×846 25.6 KB

Thanks in advande!!

3 Likes
2
  1. Add to .env:
WEBSITE=http://mywebsite.com
  1. Add the recently added env to /config/server.js
module.exports = ({ env }) => ({
  host: env('HOST', '127.0.0.1'),
  port: env.int('PORT', 1337),
  url: env('WEBSITE', 'http://127.0.0.1'), // THIS ONE
});
  1. Modify your controller like this:
const { sanitizeEntity } = require('strapi-utils');
module.exports = {
  async findOne(ctx) {
    const { id } = ctx.params;
    const entity = await strapi.services.blogs.findOne({ id });
    entity.Content = entity.Content.replace('src="/', `src=\\"${strapi.config.get('server.url')}/`); // Here we modify the 'Content' and add your website "url" to it
    return sanitizeEntity(entity, { model: strapi.models.blogs });
  },
};

Profit.

2 Likes
3

Thanks for your help ! But the replacement doesn’t work, i changed to .replace(‘src="/’, src=\\"${strapi.config.get('server.url')}/) ( ommitted the first backslash) and i worked ??

1 Like
4

Yeah, I’m writing the code without testing/verifying it :crazy_face: But I assumed it will throw an error for backslash in replace() func.

5

Very good implementation @sunnyson thank you for this.

A careful point to make is ensuring it’s injecting the dynamic WEBSITE variable instead of storing the absolute path in the database :wink: which your implementation does :+1:

1 Like
6

Is there a way to modify the generic Strapi controller instead of doing this per entity?

Let say, if I want the absolute path for each of my url fields. I would like to avoid messing around with each controller, but rather have this the default behavior and and change this on a per controller basis instead (when there are case when I don’t want the absolute path)

2 Likes
7

There is not a way to do it globally at the moment no :frowning:

8

I’ve read through the documentation and the current roadmap and did not find anything related to this idea so I am giving it a shot here. I think, it would be nice to be able to prefix asset’s url automatically, like here, in the next-images package.

I can’t provide you with stats, but I feel that a common use case is to store uploaded content elsewhere (s3, google-storage, …) than on the Strapi’s server. However, from my understanding, content url are always relative (e.g /uploads/my-picture.png). Which requires to extend controller like @sunnyson suggested, instead of having it as a simple opt-in config possibility.

2 Likes
9

I’d like to +1 this feature as a site-wide option to change the returned image src urls.

I’m using Strapi in a Google Cloud App Engine container with the uploads stored in a Storage Bucket so when I upload an image the resulting image urls are of the form http://googlecloudstorage.url/imagefile. However, I’m also mixing some pre-uploaded assets that I’ve added locally before uploading to GC and their image urls are of the form /imagefile.

In my front-end app I can do some string parsing of the url to check for the presence of / to do the right thing in an image URL processor but it would be nice if we could just make all the image urls returned absolute and not have to do any processing.

Thanks!
RenderMaster

3 Likes
10

If Strapi is a headless CMS, it’s the default scenario that the images embedded in the markdown content won’t be co-hosted with the frontend.

I’m curious how the average Strapi user is expected to make markdown images work? :man_shrugging:

3 Likes
11

Hi Thank you so much for the Solution.

But how can i do in Strapi “4.9.0”

as my controller looks like

image
image1215×503 52.2 KB

Please suggest