The following code is to share with you the local cache of images based on Vue+mui. The specific code is as follows:
const menu = { state: { products: {}, GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] }, mutations: { get_product: function (state, products) { //Product List = products; for(let i = 0; i < ; i++){ if([i]['image'] != null){ // [i]['image'] = state.GLOBAL_CONFIG['base64Header'] + [i]['image']; //Download the picture to the local area ('imgCache',[i]); }else{ //Add default image [i]['image'] = require("../assets/"); } } }, imgCache: function (state,imgObj) { (function(){ // 1. Convert the network image address to the local cache image path to determine whether the image exists in a local cache // http://...jpg -> md5 // Cache directory _downloads/image/(md5).jpg let image_url = ; let image_md5 = md5(image_url); //Cached local image url let local_image_url = '_downloads/image/'+image_md5+'.jpg'; // Absolute path of the platform let absolute_image_path = (local_image_url); (absolute_image_path); // Determine whether the file exists locally. If it exists, use it directly, otherwise download it ( absolute_image_path, function( entry ) { if(entry){ = (local_image_url); }else{ download_img(); } }, function ( e ) { ("Resolve file URL failed: "); download_img(); } ); function download_img(){ // filename: The file path saved locally by the download task let download_task = (image_url, { filename: local_image_url }, function(download, status) { // Download failed, delete local temporary files if(status != 200){ ('Download failed, status'+status); if(local_image_url != null){ (local_image_url, function(entry) { (function(entry) { ("Temporary file deletion successful" + local_image_url); // Re-download the picture download_img(); }, function(e) { ("Temporary file deletion failed" + local_image_url); }); }); } }else{ // Show the pictures that were successfully downloaded // Convert local URL path to platform absolute path ("Download successfully" + local_image_url); = (local_image_url); } }); download_task.start(); } }); } }, actions: { } }
Summarize
The above is the local cache sample code for Vue+mui implementation pictures introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!