[bug] Load image error on Ubuntu.

[Luciennnnnnn]

Describe the bug

I got this error when I load image on Ubuntu, everything works on Mac and Windows.

Reproduction

No response

Expected behavior

No response

Platform and versions

Environment
  › OS: Ubuntu 20.04 X64
  › Node.js: 16.15.1
  › npm: 8.11.0
  › pnpm: 6.11.0
  › yarn: 1.22.15
  › rustup: 1.24.3
  › rustc: 1.61.0
  › cargo: 1.61.0
  › Rust toolchain: stable-x86_64-unknown-linux-gnu 

Packages
  › @tauri-apps/cli [NPM]: 1.0.0
  › @tauri-apps/api [NPM]: 1.0.1
  › tauri [RUST]: 1.0.0,
  › tauri-build [RUST]: 1.0.0,
  › tao [RUST]: 0.11.2,
  › wry [RUST]: 0.18.3,

App
  › build-type: bundle
  › CSP: default-src 'self' customprotocol: asset: https://asset.localhost; img-src 'self' asset: https://asset.localhost
  › distDir: ../dist
  › devPath: http://localhost:3000/
  › framework: Vue.js

App directory structure
  ├─ src-tauri
  ├─ public
  ├─ dist
  ├─ src
  ├─ .github
  ├─ node_modules
  ├─ lib
  ├─ .git
  └─ .vscode

Stack trace

No response

Additional context

No response

[lucasfernog]

Can you share how you're loading the asset? Is it a fetch?

[lucasfernog]

This is a CORS issue - we set the headers on macOS and Windows (that's why it works on those platforms) but webkit2gtk only added support for this recently, so we can't update yet :/

[Luciennnnnnn]

Can you share how you're loading the asset? Is it a fetch?

I load image using this code:

[Luciennnnnnn]

This is a CORS issue - we set the headers on macOS and Windows (that's why it works on those platforms) but webkit2gtk only added support for this recently, so we can't update yet :/

Is that mean webkit2gtk already supports this? Can tauri update for that?

[lucasfernog]

We're working to update it - but it's complicated, see #3961

[lucasfernog]

In your specific case it works if you remove i.crossOrigin = 'Anonymous' @LuoXin-s

[lucasfernog]

It wouldn't work if you were using fetch() but for video/img tags it works just fine.

[Luciennnnnnn]

In your specific case it works if you remove i.crossOrigin = 'Anonymous' @LuoXin-s

I remember that if I remove i.crossOrigin = 'Anonymous', there is another problem. that's why I added that. I'll test again and make a response to you.

[Luciennnnnnn]

We're working to update it - but it's complicated, see #3961

ok

[Luciennnnnnn]

@lucasfernog If I remove i.crossOrigin = 'Anonymous', I can't export canvas to dataurl. I load image into canvas, and export it to image.

[lucasfernog]

Ahh that's also a CORS issue. If the images are small (and you're not loading several images) you could read the files directly and parse them for the image element but that's.. hard and suboptimal.

[lucasfernog]

@wusyong do you know if there's a way to disable CORS checks for custom protocols on Linux?

[Luciennnnnnn]

Ahh that's also a CORS issue. If the images are small (and you're not loading several images) you could read the files directly and parse them for the image element but that's.. hard and suboptimal.

I need to operate many images and they are large usually.

[lucasfernog]

Reference discussions: #2327 (comment)
tauri-apps/wry#366 (comment)
tauri-apps/wry#348