Интеграция GatsbyJS с компрессором изображений: SecurityError: Операция небезопасна

Question

Я пытаюсь интегрировать компрессор изображений npm в один из моих компонентов GatsbyJS. но получил ошибку SecurityError: операция небезопасна. Что с этим не так? Я нашел несколько сообщений, которые предлагают добавить crossOrigin = "anonymous" в мой тег img. Но все равно не избавиться от ошибки. Вот код моего компонента.

import React         from 'react'
import Link          from 'gatsby-link'
import NotFound       from '../assets/images/image-not-found.png'
import Moment        from 'react-moment'

const localServer = "http://localhost:1337"

var imageCompressor = new ImageCompressor;  
var compressorSettings = {
    toWidth : 100,
    toHeight : 100,
    mimeType : 'image/png',
    mode : 'strict',
    quality : 0.6,
    grayScale : true,
    sepia : true,
    threshold : 127,
    vReverse : true,
    hReverse : true,
    speed : 'low'
};

const NewsSection = ({data}) => {            
  function renderImage(imgSrc) {
    return imageCompressor.run(imgSrc, compressorSettings, (compressedSrc) => {
      console.log(imgSrc)
    })
  }

  return (
    <section className="features" id="news">
      <div className="container team-container">
        <div className="row">
          <div className="col-lg-12 text-center">
            <div className="navy-line teal-color"></div>
            <h1>News</h1>
          </div>
        </div>

        { data.map(document => (

            <div className="row blog-post">
              <div className="col-sm-12 col-md-4">
                <img 
                  src={document.node.image ? renderImage(localServer + document.node.image.url) : NotFound } 
                  alt="" 
                  className="img-fluid"
                />
              </div>
              <div className="col-sm-12 col-md-8">
                <h2>{document.node.headline}</h2>
                <div className="news-credit">
                  <strong className="commens-name">{document.node.publisher}</strong>
                  <span style={{marginLeft: '5px'}}/>
                  <small className="text-muted">Publication date
                    <span style={{marginLeft: '5px'}}/>
                    <Moment parse="YYYY-MM-DD HH:mm:ss">
                      {document.node.publish_date}
                    </Moment>
                  </small>
                </div>
                <hr/>
                <p>{document.node.content}</p>
                <a href={document.node.post_link} target="blank">
                  <button className="btn btn-primary">Read More</button>
                </a>
              </div>
            </div>
          ))
        }
      </div>
    </section>
  )
}

export default NewsSection

и я включил файл скрипта в мой файл gatsby-browser.js:

import './src/assets/javascripts/bootstrap.min.js'
import './src/assets/javascripts/cbpAnimatedHeader.js'
import './src/assets/javascripts/pace.min.js'
import './node_modules/image-compressor/image-compressor.js'

exports.onInitialClientRender = () => {

};