How to display images from strapi wysiwyg markdown editor to angular frontend

Question

So I figured I'll answer this question as I had searched for a while and found nothing.

Scenario (Angular frontend and Strapi backend):

I have blog posts that contain text and images, and I am trying to display the images on my website as they are stored in markdown on strapi.

example of what the image path in markdown looks like

![beautiful-picture.jpg](/uploads/beautiful_picture.jpg)

The problem is that on the frontend, this path resolves to

http://localhost:4200/uploads/beautiful_picture.jpg

whereas the image is actually here

http://localhost:1337/uploads/beautiful_picture.jpg

How can I configure my angular frontend app to use the strapi backend URL when creating image URLs without having to manually copy the backend uploads folder into my frontend src folder?

Answer 1

To resolve this issue, I had to use Angular proxy, note that this can be used for both local and remote servers.

For example, to divert all calls for http://localhost:4200/uploads to your backend strapi server running on http://localhost:1337/uploads, take the following steps.

1. Create a file proxy.conf.json in your project's src/ folder.

2. Add the following content to the new proxy file:

{
  "/uploads": {
    "target": "http://localhost:1337",
    "secure": false
  }
}

3. In the CLI configuration file, angular.json, add the proxyConfig option to the serve target:

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "frontend:build:production"
            },
            "development": {
              "browserTarget": "frontend:build:development",
              "proxyConfig": "src/proxy.conf.json"
            }
          },
...

4. Make sure to stop the development server if it's already running and type ng serve to boot up the dev server again.

5. Back in your browser, you should now see the images displayed within the text.

6. Visit Angular proxy to read more.

7. bonus tip: you can use ngx-markdown to display markdown content in your angular template.