


In Tauri Vue3 application: How to correctly parse local binary image files?
Apr 04, 2025 am 11:27 AMSolutions 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!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

In the digital currency market, real-time mastering of Bitcoin prices and transaction in-depth information is a must-have skill for every investor. Viewing accurate K-line charts and depth charts can help judge the power of buying and selling, capture market changes, and improve the scientific nature of investment decisions.

Ethereum is a decentralized application platform based on smart contracts, and its native token ETH can be obtained in a variety of ways. 1. Register an account through centralized platforms such as Binance and Ouyiok, complete KYC certification and purchase ETH with stablecoins; 2. Connect to digital storage through decentralized platforms, and directly exchange ETH with stablecoins or other tokens; 3. Participate in network pledge, and you can choose independent pledge (requires 32 ETH), liquid pledge services or one-click pledge on the centralized platform to obtain rewards; 4. Earn ETH by providing services to Web3 projects, completing tasks or obtaining airdrops. It is recommended that beginners start from mainstream centralized platforms, gradually transition to decentralized methods, and always attach importance to asset security and independent research, to

First, select well-known platforms such as Binance Binance or Ouyi OKX, and prepare your email and mobile phone number; 1. Visit the official website of the platform and click to register, enter your email or mobile phone number and set a high-strength password; 2. Submit information after agreeing to the terms of service, and complete account activation through the email or mobile phone verification code; 3. After logging in, complete identity authentication (KYC), enable secondary verification (2FA), and regularly check security settings to ensure account security. After completing the above steps, you can successfully create a BTC digital currency account.

1. Download and install the application through the official recommended channel to ensure safety; 2. Access the designated download address to complete the file acquisition; 3. Ignore the device safety reminder and complete the installation as prompts; 4. You can refer to the data of mainstream platforms such as Huobi HTX and Ouyi OK for market comparison; the APP provides real-time market tracking, professional charting tools, price warning and market information aggregation functions; when analyzing trends, long-term trend judgment, technical indicator application, trading volume changes and fundamental information; when choosing software, you should pay attention to data authority, interface friendliness and comprehensive functions to improve analysis efficiency and decision-making accuracy.

Binance provides bank transfers, credit cards, P2P and other methods to purchase USDT, USDC and other stablecoins, with fiat currency entrance and high security; 2. Ouyi OKX supports credit cards, bank cards and third-party payment to purchase stablecoins, and provides OTC and P2P transaction services; 3. Sesame Open Gate.io can purchase stablecoins through fiat currency channels and P2P transactions, supporting multiple fiat currency recharges and convenient operation; 4. Huobi provides fiat currency trading area and P2P market to purchase stablecoins, with strict risk control and high-quality customer service; 5. KuCoin supports credit cards and bank transfers to purchase stablecoins, with diverse P2P transactions and friendly interfaces; 6. Kraken supports ACH, SEPA and other bank transfer methods to purchase stablecoins, with high security

Bitcoin (BTC) is the world's first decentralized digital currency. Since its debut in 2009, it has become the leader in the digital asset market with its unique encryption technology and limited supply. For users who are following the cryptocurrency space, it is crucial to keep track of their price dynamics in real time.

During the process of investing in the currency circle, paying attention to the market popularity and activity of the currency will help capture potential coins and popular trends. The popularity list reflects the transaction volume, social discussion and market attention of the currency, and is an effective tool for novices to quickly understand market trends.

First, choose a reputable digital asset platform. 1. Recommend mainstream platforms such as Binance, Ouyi, Huobi, Damen Exchange; 2. Visit the official website and click "Register", use your email or mobile phone number and set a high-strength password; 3. Complete email or mobile phone verification code verification; 4. After logging in, perform identity verification (KYC), submit identity proof documents and complete facial recognition; 5. Enable two-factor identity verification (2FA), set an independent fund password, and regularly check the login record to ensure the security of the account, and finally successfully open and manage the USDT virtual currency account.
