Vue / Javascript 解析二进制图像文件错误？-灵析社区

用 tauri + Vue3 + markdown-it 构建的 markdown 解析工具。其中 `template` 的内容使用 `v-html` 绑定，所以解析出的图片是相对路径。 使用 `npm run tauri dev` 时顺利渲染，但是在 `npm run tauri build` 后，由于安全设置的问题，前端无法读取图片，此时路径依然显示相对路径 `../img/xxx.png`，实际为 `https://tauri.localhost/img/xxx.png`。 按照 [convertFileSrc](https://link.segmentfault.com/?enc=CVA3qJVwAvn1OLTqve2%2BRQ%3D%3D.mOtdZqmXeEdmWorTEapK1si4N2F2%2FUAbLhzSTF%2FboLYqLwdk1MMClBBOuHlPl2EtXr%2Fx22eJFseJgp0aR7Nl6A%3D%3D) 案例尝试修改 tauri.conf.json，将 `tauri.security.csp` 设为 `"csp": "default-src 'self'; img-src '*' asset: https://asset.localhost"`，其中 `img-src` 按照建议修改为 `"*"`，另外还有一些尝试，都无法直接由前端 `src` 中的绝对路径来显示图片，所以**考虑在检测到 md 文件渲染完毕后由 tauri/api/fs 直接读取本地文件或在 Rust 后端中将二进制文件信息传到前端，用 blob 解析。** 其中，在 Rust 后端读取文件的方法试过，**直到 blob 解析都没有报错，但不能正常显示图片** ，不知道是不是数据格式问题。而直接由前端调用 `fs` 读取 **也出现了相似的问题，在最后一步无法显示图片。** 由于后续测试过程中基本没有用到后端，预估是 Vue 或者图片文件解析的问题。 首先将 tauri.conf.json 中的 `tauri.allowlist.fs` 设为： "fs": { "all": true, "scope": ["D:/**", "E:/**"] } 即允许 fs 读取两个盘中所有文件； 将上面提到的 `csp` 设为： `"csp": "asset:"` 前端对图片的处理主要是： let img_path = "E:/myProjects2/tauri_vue/mdren/img/a-1-01.png"; const contents = await readBinaryFile(img_path); // contents 为 Uint8Array，须转换为 string const str_contents = () => { let binary = ""; let len = contents.byteLength; for (let i = 0; i 重新渲染 async function reloadImg() { console.log("function called"); let img_element = document.querySelectorAll("#img-to-remove"); console.log(img_element); img_element.forEach(async (element) => { element.src = "data:image/png;base64," + src; }); } 在软件中按 F12 调出开发者工具后，可以看到对应图片的 `src` 是正常的，但是图片不确定是否有编码等错误，表现为损坏或未正常加载的形式。  * * * 重新做了个小 demo，未用到 Rust 后端，前端代码如下： `components/imgDecode.vue` ： import { nextTick, ref } from "vue"; import markdownIt from "markdown-it"; import { invoke, convertFileSrc } from '@tauri-apps/api/tauri'; import { resolve, resourceDir } from '@tauri-apps/api/path'; import { readBinaryFile } from "@tauri-apps/api/fs"; const md = markdownIt(); md.set({ html: true }); const md_context = ref(); // 任选一张图片为例 let img_path = "E:/myProjects2/tauri_vue/mdren/img/a-1-01.png"; const contents = await readBinaryFile(img_path); const str_contents = () => { let binary = ""; let len = contents.byteLength; for (let i = 0; i { reloadImg(); }) } catch (e) { console.log(e); } } async function solveMd() { md_context.value = await md.render("$\\xRightarrow{aaaaaaaaaaaaaaaaaaa}$\n\n"); } async function reloadImg() { console.log("function called"); let img_element = document.querySelectorAll("#img-to-remove"); console.log(img_element); img_element.forEach(async (element) => { element.src = "data:image/png;base64," + src; }); } `App.vue` ： import imgDecode from "./components/imgDecode.vue";