Shulou(Shulou.com)06/01 Report--

This article mainly introduces how Vue sets up pictures not to be converted to base64, which has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

Vue Settings Picture does not convert to base64

When developing projects using the Vue.js framework, webpack templates created by vue-cli convert images and font files below 10K to base64 by default.

Benefits: Faster rendering without the lag of loading images when switching pages.

Cons: CSS, JS files after packaging are very large, especially in the case of a large number of images, this problem is particularly obvious.

vue-chli 3, vue-chli 4 versions

Modify file: vue.config.js

The source code is as follows

module.exports = { // ... /* Adjust inline file size limit so small images don't turn into base64 */ chainWebpack: config => { config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options => Object.assign(options, { limit: 1 })) }, // ...} vue-cli 2 version

Modify file: /build/webpack. base. conf. js

Modification method, as shown in the following position, the image and font limit (limit) modified to: 1 (0 seems invalid), the modified file will not be converted to base64 format.

Vue project base64 to img

In a recent vue project, there is a requirement that when the message is base64, it is converted into an image preview and sent out.

input box

Set a dialog box.

cancelled determine //Listen for paste events async onPasteEvent(e) { e.preventDefault(); let data = await addEventPasteListener(e); if (data.type === "string") { //copy a message if (! data.string) return; // console.log(data.string) //regular expression to determine whether data is base64 function validDataUrl(s) { return validDataUrl.regex.test(s); } validDataUrl.regex = /^\s*data:([a-z]+\/[a-z0-9-+.]+ (;[a-z-]+=[a-z0-9-]+)?)? (;base64)?, ([a-z0-9!$& ',()*+;=\-._~:@\/?%\ s]*?)\ s*$/i; //if base64 converts to image preview if (validDataUrl(data.string)) { let that = this; function previwImg(item) { that.previewImgObj = { show: true, imgUrl: item }; } previwImg(data.string); } } Effect Display

Thank you for reading this article carefully. I hope that the article "Vue how to set the picture not to be converted to base64" shared by Xiaobian will be helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.