背景图像在 Safari v14 Catalina 上不起作用

Question

I have my project almost done, but faced the issue that background image doesn't work on MacOS Catalina Safari version 14. Do you happen to know where the problem can be? Thank you in advance, ohh. I also should mention that project is written on React with TS.

.image {
  width: calc(100vw - 48rem);
  height: 100vh;
  background: url('../../public/img/auth-bg.jpg') left center no-repeat;
  -o-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  @include mobile() {
    width: 0;
  }
}

Answer 1

try This, public URL is base Url in the project you can it like this

.image {
  width: calc(100vw - 48rem);
  height: 100vh;
  background: url('/img/auth-bg.jpg') left center no-repeat;
  -o-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  @include mobile() {
    width: 0;
  }
}