Image is displayed successfully when hosting locally with react.js however when accessing the image through aws server the image will not display

I have a front end developed in react.js, a mysql database, and a back end using express functions for api calls. When hosting the front and back end locally I can send a post request to the back end with some variables, the back end then queries the mysql database for a corresponding row and returns a value. This value is then used to select an image which is then passed to the front end (all standard stuff) which works perfectly. The problem is when hosting the back end on an AWS server and altering the url requests appropriately the image will not display.

There are no error messages, it still passes something successfully. However when hosted locally it displays the image, and when in production mode it does not display the image.

I have tried standard image display methods and tried react-image with no success. Looking for any information as to what could be causing this problem and how to fix it.

Image is displayed with this code <img src={this.state.image} width={this.state.letterWidth} height={this.state.letterHeight} className="style1"/>

I know the variables are being sent correctly to the back end. The backend is sending the image to the front end with the following code.

          if (err) {
            console.log(err);
            res.status(err.status).end();
          }
          else {
            console.log('Sent:', fileName);
          }
        });

filename is the name of the desired file, options are

          root: dir,
          dotfiles: 'deny',
          headers: {
            'x-timestamp': Date.now(),
            'x-sent': true
          }
        }

Finally the front end uses this code to set the image state variable to the url that is sent from the back end.

fetch(url, {
      method: 'POST',
      headers: {'Content-Type' : 'application/json'},
      body: JSON.stringify(data)
    })
    .then(response => {
      const reader = response.body.getReader();
      return new ReadableStream({
      start(controller) {
        return pump();
          function pump() {
            return reader.read().then(({ done, value }) => {
              // When no more data needs to be consumed, close the stream
              if (done) {
                controller.close();
                return;
              }
              // Enqueue the next data chunk into our target stream
              controller.enqueue(value);
              return pump();
            });
          }
        }
      })
    })
    .then(stream => new Response(stream))
    .then(response => response.blob())
    .then(blob => URL.createObjectURL(blob))
    .then(url => this.loadImage(url))
    .catch(err => console.error(err));
  }

  loadImage = (url) => {
    this.setState({
      image: url,
    });
  }