CSS - Same image but url() cannot load image

Question

I'm trying to mask image using css, but image got disappeared after applying mask, checked when I use html to load image, it successed, but with css url(), it failed to load image, even it has same file and directory. What's problem here and how to fix?

Here's html code and css, tried putting another image to record_img, loads well but still disappears since mask didn't load

<img class="record_img" src="../../resources/mask.png" alt="">
<link rel="stylesheet" href="../fragments/css/style.css">
<link rel="stylesheet" href="style.css">

.record_img {
    -webkit-mask-image: url("../../resources/mask.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
}

An example, including your CSS and HTML code, will probably be helpful in debugging your issue. — Jake, Mar 07 '23 at 02:41
You have 2 css files, are you sure you have the styles in the correct file? — Musa, Mar 07 '23 at 02:57
I imported both css files, and the css code is from main/style.css — gmma, Mar 07 '23 at 02:58
So your CSS and HTML files are at the same relative folder depth? Eg, you don't need one more (or one fewer) set of `../` in your image path? — Jake, Mar 07 '23 at 03:00
But I checked request URL of both file request, both are same.. — gmma, Mar 07 '23 at 03:01
So you're saying that both requests for "mask.png" are going to the exact same file path, and one is fine and one is failing? — Jake, Mar 07 '23 at 03:06
Yes, I checked first one(html loaded) is 200 and failed one(css loaded) got CORS disabled scheme error now. — gmma, Mar 07 '23 at 03:13
Well I am not a security expert by any means, so a CORS-related question may be out of my wheelhouse. But just to collect some more details... What IDE are you using? (Looks like VSCode?). How are you actually opening your main.html file? Are you perhaps just opening your main.html file directly in the browser (rather than hosting on localhost) and running into [this issue](https://www.reddit.com/r/css/comments/neinxz/comment/gyh2uxf/?utm_source=share&utm_medium=web2x&context=3)? What browser are you using? — Jake, Mar 07 '23 at 03:40
`file://` is considered an opaque origin and thus isn't allowed as `mask`. Run a local server for development. — Kaiido, Mar 07 '23 at 05:22

TOKYO · Answer 1 · 2023-03-07T02:49:10.227

0

Try something like that url('C:/User/..../resources/mask.png') Full path to file

edited Mar 07 '23 at 02:49

answered Mar 07 '23 at 02:44

TOKYO

1
1

It's possible that this could resolve the issue in the short term, but is not a good suggestion overall - if and when you deploy this website, this absolute file path is almost certain to not be the same on the host machine/server, so all of your images will then be broken. – Jake Mar 07 '23 at 03:02

CSS - Same image but url() cannot load image

1 Answers1