mask-imageが表示されない

HTMLで表示させた画像にCSSでmask-imageをあてて、切り抜き表示させたいのですがうまくいきません。

ATOM上のプレビューではきちんと表示されているのですが、ローカルのHTMLファイルをChromeで表示すると、mask-imageも下の画像も表示されないです。
デベロッパーツールで確認すると、mask-imageはきちんとかかっており、リンクのパスも問題ないのですがどうして表示されないのでしょうか？？

以下コードになります。

HTML
1    <div class="fv_bg slick01">
2      <img src="img/43.jpg">
3      <img src="img/43.jpg">
4      <img src="img/43.jpg">
5      <img src="img/43.jpg">
6    </div>

CSS
1.fv_bg {
2  mask-image: url('../img/home/fv_mask.png');
3  -webkit-mask-image: url('../img/home/fv_mask.png');
4  mask-size: contain;
5  -webkit-mask-size: contain;
6  mask-repeat: no-repeat;
7  -webkit-mask-repeat: no-repeat;
8}

追記
ChromeのConsoleをかくにんしたところ次のメッセージが表示されていました。このエラーが原因かと思いましたが、対策がわからず、、ご教示いただけますと幸いです；；

Access to image at 'file:///Users/名前/Desktop/irodori.com/img/home/fv_mask.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

ATOM上の表示のプレビュー画像は以下です。