Angular 12: Module Federation- background image in shell app not loaded correctly in host app

Question

I have a child mfe that sets the background image of a div using url()

.div-class {
    background:transparent url(../../../assets/image.gif) no-repeat
}

This url does link to the gift correctly when ran independently. However, when trying to display it in the host mfe, it doesn't load it as a gif (in the network tab, the type is text/html) which then ends up being empty on the screen.

This is the webpack.config.js

const ModuleFederationPlugin = require('webpack/;ib/container/ModuleFederationPlugin')

modules.exports = {
    output: {
        uniqueName: 'ChildA'
        publicPath: 'auto'
    },
    optimization: {
        runtimeChunk:false
    }
    plugins: [
        new ModuleFederationPlugin({
           name: 'ChildA',
           filename: 'remoteEntry.js',
           exposes: {
             './childA': 'path to module'
           },
           shared: {
              '@angular/core': {singleton: true, eager: true}
           }
        })
    ]
}

The assets folder is listed in the architect build inside angular json