Not allowed to load local resource #11919
-
Bug: Unable to Load Local Resources in Tauri with React FrontendDescriptionWhen trying to load image files located on the local filesystem in a Tauri app (using a React frontend), the app fails to render the image. Specifically, using a local file path like Error: This issue occurs even though the path is valid and accessible on the local machine. Steps to Reproduce
Example code: const testImage = "C:\\Users\\ramyb\\Pictures\\mejpg.jpg";
return <img src={testImage} alt="Local Test Image" />; Expected BehaviorThe image should render properly if the file exists and the path is correct. Actual BehaviorThe image fails to load, and the console shows the error:
Environment
Relevant CodeReact Componentconst testImage = "C:\\Users\\ramyb\\Pictures\\mejpg.jpg";
return <img src={testImage} alt="Local Test Image" />;
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
i think plain file paths are generally not valid img sources. on top of that |
Beta Was this translation helpful? Give feedback.
i think plain file paths are generally not valid img sources. on top of that
file://
urls aren't supported in tauri. Instead there's theasset:
protocol (because we can't overwrite thefile:
protocol). The exact protocol differs per OS though so you should use convertFileSrc if possible https://v2.tauri.app/reference/javascript/api/namespacecore/#convertfilesrc