


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!

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.

This article lists the top ten trading software in the currency circle, namely: 1. Binance, a world-leading exchange, supports multiple trading modes and financial services, with a friendly interface and high security; 2. OKX, rich products, good user experience, supports multilingual and multiple security protection; 3. gate.io, known for strict review and diversified trading services, attaches importance to community and customer service; 4. Huobi, an old platform, has stable operations, strong liquidity, and has a great brand influence; 5. KuCoin, has large spot trading volume, rich currency, low fees, and diverse functions; 6. Kraken, a US compliance exchange, has strong security, supports leverage and OTC trading; 7. Bitfinex, has a long history, professional tools, suitable for high

The failure to register a Binance account is mainly caused by regional IP blockade, network abnormalities, KYC authentication failure, account duplication, device compatibility issues and system maintenance. 1. Use unrestricted regional nodes to ensure network stability; 2. Submit clear and complete certificate information and match nationality; 3. Register with unbound email address; 4. Clean the browser cache or replace the device; 5. Avoid maintenance periods and pay attention to the official announcement; 6. After registration, you can immediately enable 2FA, address whitelist and anti-phishing code, which can complete registration within 10 minutes and improve security by more than 90%, and finally build a compliance and security closed loop.

Identifying the trend of the main capital can significantly improve the quality of investment decisions. Its core value lies in trend prediction, support/pressure position verification and sector rotation precursor; 1. Track the net inflow direction, trading ratio imbalance and market price order cluster through large-scale transaction data; 2. Use the on-chain giant whale address to analyze position changes, exchange inflows and position costs; 3. Capture derivative market signals such as futures open contracts, long-short position ratios and liquidated risk zones; in actual combat, trends are confirmed according to the four-step method: technical resonance, exchange flow, derivative indicators and market sentiment extreme value; the main force often adopts a three-step harvesting strategy: sweeping and manufacturing FOMO, KOL collaboratively shouting orders, and short-selling backhand shorting; novices should take risk aversion actions: when the main force's net outflow exceeds $15 million, reduce positions by 50%, and large-scale selling orders

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, click the official download link provided in the article to complete the application download. 1. Click the official download link marked in green to start downloading the installation package. When the browser prompts for risks, select "Stay to download"; 2. After the download is completed, enter the "Security" or "Privacy" option in the device "Settings" and enable "Allow to install applications from unknown sources", and then click the downloaded installation package to complete the installation according to the prompts; 3. After the installation is successful, open the application, select register a new account or log in to an existing account, complete the registration according to the instructions and properly keep the account information. After logging in, you can use Binance's various digital asset trading and management functions.

The currency circle trend order is a trading plan formulated by investors based on the analysis and judgment of the price trend of digital currency. 1. Make long orders in the upward trend, clarify the buying price and expect high-price selling to make profits; 2. Make short orders in the downward trend, and plan to sell at a high price and make up for profit at a low price; 3. Accurately judge the trend, you need to combine the trend line, moving average line and trading volume changes. The more key high and low points, the more effective the trend line, the more volume and price coordination is an important sign of the healthy trend; 4. Reasonably set stop loss to control risks, set the stop loss below the key support when long, and lock the profit based on the increase or reversal signal to lock in profits; 5. Choose to enter the market when the trend is clear, avoid operating in the oscillating market, and combine multiple indicators to confirm the timing when the pullback ends or rebound encounters obstacles; 6. Strictly abide by trading discipline

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.
