vue.js - nginx reverse proxy location order problem

Question

The following matching rules, my purpose is

1. Static images starting with /api/img are reverse proxy to http://localhost:8084/, such as /api/img/default.png is proxy to http://localhost:8084/default. ..

2. Static images starting with /api/img/cdn/, reverse proxy to http://clouddn.com/ on cdn, such as /api/img/cdn/default.png proxy to http:/ /clouddn.com/default.png

The first one can be implemented, but the second one cannot be implemented. Thank you for your help in modifying it
server {

    listen    8085;
    server_name        localhost;
    location /api/v1 { 
        proxy_pass http://localhost:8084/api/v1;
    }

    location ^~ /api/img/cdn/ { 
        proxy_pass http://clouddn.com/;
    }
    location /api/img { 
        proxy_pass http://localhost:8084/;
    }

    location / {
        root  html/vue2;
        index  index.html index.htm;
    }
}

Answer 1

Change ^~ /api/img/cdn/ to /api/img/cdn/, or ~ /api/img/cdn/, take a look at the location matching rules, refer to http://seanlook.com/2015/05 /1...

Answer 2

Pay attention to the slashes in your path. If there are no subdirectories, remove the slashes