In Tauri Vue3 application: How to correctly parse local binary image files?

Solutions to parse local binary image files in Tauri and Vue3 applications

This article discusses the problem that local images cannot be displayed due to security policy restrictions in the Markdown parser built with Tauri, Vue3, and markdown-it, and provides a final solution.

Problem: This tool uses v-html to render images (relative paths) in a Markdown file. The image is displayed normally in development mode, but after construction, the browser security policy still prevents the front-end from accessing local images even if the path is converted to an absolute path (for example: https://tauri.localhost/img/xxx.png ).

Try: Modifying the CSP policy in tauri.conf.json (for example, setting img-src to * ) is invalid. Two solutions were tried: 1. Use Tauri's fs API to read local files; 2. Read binary files in the Rust backend, pass data to the frontend, and parse using Blob object. Both solutions cause the image display to be corrupt or unloadable. The suspect is the image parsing or data format of Vue.js.

The initial front-end code tries to convert the binary data into a string, then encodes it as base64 using window.btoa , and finally sets src attribute of img element.

Final solution: Generate URL using Blob object and URL.createObjectURL method. The code is as follows:

 let img_path = "E:/myProjects2/tauri_vue/mdren/img/a-1-01.png";
const contents = await readBinaryFile(img_path); // Assume that the readBinaryFile function has been defined let blob = new Blob([contents], { type: "image/png" });

async function reloadImg() {
  let img_element = document.querySelectorAll("#img-to-remove");
  img_element.forEach(async (element) => {
    element.src = URL.createObjectURL(blob);
  });
}

Cause analysis: The previous solution failed may be due to CSP configuration errors or Rust backend data delivery issues. Use the Blob object and URL.createObjectURL to directly create the image URL, bypassing security policy restrictions and successfully resolve the image display problem.

The above is the detailed content of In Tauri Vue3 application: How to correctly parse local binary image files?. For more information, please follow other related articles on the PHP Chinese website!