Tauri Vue3 응용 프로그램 : 로컬 이진 이미지 파일을 올바르게 구문 분석하는 방법은 무엇입니까?

Tauri 및 VUE3 응용 프로그램의 로컬 이진 이미지 파일을 구문 분석하는 솔루션

이 기사에서는 Tauri, Vue3 및 Markdown-IT로 구축 된 Markdown Parser의 보안 정책 제한으로 인해 로컬 이미지가 표시 될 수 없다는 문제에 대해 설명하고 최종 솔루션을 제공합니다.

문제 :이 도구는 v-html 사용하여 Markdown 파일에서 이미지 (상대 경로)를 렌더링합니다. 이미지는 개발 모드로 정상적으로 표시되지만 구성 후에는 브라우저 보안 정책은 경로가 절대 경로 (예 : https://tauri.localhost/img/xxx.png )로 변환 되더라도 로컬 이미지에 액세스하는 것을 방지합니다.

시도 : tauri.conf.json 에서 CSP 정책 수정 (예 : img-src * 로 설정)에서 유효하지 않습니다. 두 가지 솔루션을 시도했습니다. 1. Tauri의 fs API를 사용하여 로컬 파일을 읽으십시오. 2. Rust Backend에서 이진 파일을 읽고, 데이터를 프론트 엔드로 전달하고, Blob Object를 사용하여 구문 분석하십시오. 두 솔루션 모두 이미지 디스플레이가 손상되거나 하역 가능합니다. 용의자는 vue.js의 이미지 구문 분석 또는 데이터 형식입니다.

초기 프론트 엔드 코드는 이진 데이터를 문자열로 변환 한 다음 window.btoa 를 사용하여 Base64로 인코딩하고 결국 img 요소의 src 속성을 설정합니다.

최종 솔루션 : Blob Object 및 URL.createObjectURL 을 사용하여 URL을 생성합니다. 코드는 다음과 같습니다.

 let img_path = "e :/myprojects2/tauri_vue/mdren/img/a-1-01.png";
const contents = readbinaryfile (img_path)을 기다립니다. // readBinaryFile 함수가 정의되었다고 가정합니다.

비동기 함수 repoadImg () {
  let img_element = document.querySelectorall ( "#img-to-remove");
  img_element.foreach (async (element) => {
    요소 .src = url.createobjecturl (blob);
  });
}

원인 분석 : 이전 솔루션은 CSP 구성 오류 또는 녹음 백엔드 데이터 전달 문제로 인한 것일 수 있습니다. Blob Object 및 URL.createObjectURL 사용하여 보안 정책 제한을 우회하여 이미지 URL을 직접 작성하고 이미지 표시 문제를 성공적으로 해결하십시오.

위 내용은 Tauri Vue3 응용 프로그램 : 로컬 이진 이미지 파일을 올바르게 구문 분석하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!