Nginx Reverse Proxy Can't Show Slide/Banner

I face a problem with nginx reverse proxy, anything works fine except for some images that didn't show, which is images at slides/carousel/banner. Another images show properly. I don't know if the issue related to javascript or anything, here is my config.

server {  
    listen 80;  

    server_name example.net;  

    location / {  
        proxy_pass http://example.com;  
        proxy_set_header Accept-Encoding "";  
        sub_filter "http://example.com/" "http://example.net/";  
        sub_filter 'href="http://example.com/' 'href="http://example.net/';  
        sub_filter 'src="http://example.com/' 'src="http://example.net/';  
        sub_filter 'action="http://example.com/'         'action="http://example.net/';  
        sub_filter_once off;  
        proxy_set_header X-Real-IP $remote_addr;  
        proxy_set_header X-Forwarded-Host $host;  
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
    }
}

So after I found the problem is in the code at example.com like below

<div id="bannerSlider" style="display:none" v-show="bannerShow">
    <div class="kv lazyload" id="mainKv" v-if="bannerLength > 1">
        <div class="owl-carousel owl-theme">
            <template v-for="item in banner">
                <div class="item" v-if="item.TargetLink != ''">
                    <a :href="item.TargetLink" :target="item.PopUpLink ? '_blank':'_self'">
                        <img :src="'/Content/common/images/catch/' + item.ImgId" :title="item.Title">
                    </a>
                </div>
                <div class="item" v-else>
                    <img :src="'/Content/common/images/catch/' + item.ImgId" :title="item.Title">
                </div>
            </template>
        </div>

Anyone can help?

Solution 1:

First of all, you would only need the first sub_filter statement, because it covers the rest of the cases.

Second, you cannot reliably modify HTML like that to change domain references in code, so you can expect things breaking up in mysterious ways over time.

You can debug this issue by loading the page in browser and looking what the browser tries to load via developer tools. That way you know what is broken, and then you can fix that issue.