file url returns 404 even when the read permission is set for the logged in user

As D5 mentioned earlier you need to pass a jwt to get the resource in stored in your bucket even if it's a preview image. Checkout the jwt docs https://appwrite.io/docs/products/auth/jwt

getFilePreview() should be returning the image itself, not a link to the image

but how can we pass headers in html? what i'm doing is just <img src={imageSrc}/>. i'm not getting the file by a manual fetch request

in the cient SDK, it returns a URL to the image and in the server SDK, it returns the image itself. and besides, i'm storing the link of the image in the corresponding doc for easy access

I mostly work on mobile (Flutter) and can pass in the httpHeader to the package that handles displaying the image. From the docs have you tried setting the jwt on the client?

const client = new Client()
    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
    .setProject('<PROJECT_ID>')                  // Your project ID
    .setJWT('eyJJ9.eyJ...886ca');  

Also, found this in the docs

Images
Some use cases do not allow custom headers, such as embedding images from Appwrite in HTML. In these cases, you can provide the Appwrite project ID using the query parameter project.

<img src="[ENDPOINT]/v1/storage/buckets/[BUCKET_ID]/files/[FILE_ID]/preview?project=[PROJECT_ID]"/>

Source:
https://appwrite.io/docs/apis/rest

yes I do have the project ID passed as the query parameter. my image link looks like below
https://cloud.appwrite.io/v1/storage/buckets/[BUCKET_ID]/files/[FILE_ID]/preview?project=[PROJECT_ID]&width=300&quality=50

the width and quality params are passed for better performance so that the browser doesn't need to load the original full-sized high-quality image

what i can assume is, by the project id, appwrite backend can only know which project this request belongs to. but my each file has permissions set for specific users. so for some reason, appwrite backend cannot determine which user is sending this request

Yes, that is why the jwt is needed but I'm not sure where it should be set on the web SDK. Have you tried setting the jwt on the client?

tho i haven't tried it yet, but after checking the actual code of setJWT method, it doesn't seem to be something helpful
the setJWT method sets a header for every request we do using the client SDK. but in my case, I'm not even making any requests. I'm just embedding the link in my HTML

setJWT method code is below:

setJWT(value: string): this {
        this.headers['X-Appwrite-JWT'] = value;
        this.config.jwt = value;
        return this;
    }

@Drake Sorry for pinging but please can you help here. Should Pratik use the rest api instead of the web sdk?

On web, you need to have the cookies set up properly. This involves making sure the Appwrite cookie is a first party cookie so the browser sends it when requesting the file from Appwrite.

See https://appwrite.io/docs/advanced/platform/custom-domains

currently, the session token is saved in the localStorage under the cookieFallback name. isn't that enough? cuz all other client-side features that require a logged-in user is working quite properly. and it's currently in the development phase at the localhost

No it's not

then what more info i need to save on the localStorage?

nothing...read https://appwrite.io/docs/advanced/platform/custom-domains

atm my app is in localhost and don't have any domain to test it out. so should i think it'll be solved automatically if i add a custom domain?

You can edit your hosts file or enable 3rd party cookies

what do u mean by editing hosts file? and i'm not planning to host appwrite console in a custom domain. so is there any way i can make it work without a custom domain?

Your hosts file allows you to point domains to IPs locally. Google how to edit hosts file on <your OS>

No, you'll need a custom domain. Typically, you would host your app on something like example.com and then you would create a custom project domain like appwrite.example.com

means the only way to resolve this issue is to host appwrite console in a custom domain (sub-domain of my main project)?

You just need to add a CNAME DNS record

Or enable 3rd party cookies for local testing