Picture preview method and device, storage medium, electronic equipment and product

Abstract

The invention discloses a picture previewing method and device, a storage medium, electronic equipment and a product. The picture previewing method comprises the following steps: identifying a plurality of picture reference tags contained in a target document in a source code editor; determining a picture document attribute corresponding to each picture in the plurality of picture reference tags, the picture document attribute including a resource path corresponding to the picture and a picture type corresponding to the picture; performing loading preprocessing on the picture according to the picture document attribute, in which the loading preprocessing is to load a data packet corresponding to the picture into a cache of a source code editor, determine a character region corresponding to a picture reference tag, and determine the character region as a pointer sensing region activated and displayed by the current picture; and receiving a pointer moving instruction sent by the target object, and displaying the preview content of the picture under the condition of determining that the target pointer position positioned by the pointer moving instruction coincides with the pointer sensing area corresponding to the loading preprocessing.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer software development, in particular to a picture preview method and device, a storage medium, and an electronic device and product. BACKGROUND

[0002] In the modern front-end development process, HTML is the cornerstone of building a webpage, and its editing and debugging efficiency is directly related to the overall progress of the project. Among them, the management and preview of picture resources are indispensable, but the existing editors, including the powerful Visual Studio Code (VS Code for short), rely on external browsers or manually search for picture files in the file manager for preview when processing picture preview in HTML files. This process is not only cumbersome, but also greatly reduces the development efficiency and work flow.

[0003] Therefore, in the related art, how to directly and efficiently preview the picture content referenced by various picture tags in the HTML file inside the editor to improve the efficiency and smoothness of front-end development has not yet been proposed. SUMMARY

[0004] The embodiments of the present application provide a picture preview method and device, a storage medium, and an electronic device and product to at least solve the problem of how to directly and efficiently preview the picture content referenced by various picture tags in the HTML file inside the editor to improve the efficiency and smoothness of front-end development in the related art.

[0005] According to an embodiment of the present application, a picture preview method is provided, including: identifying a plurality of picture reference tags contained in a target document in a source code editor; determining a picture document attribute corresponding to each picture in the plurality of picture reference tags, wherein the picture document attribute includes: a resource path corresponding to the picture, and a picture type corresponding to the picture; performing loading preprocessing on the picture according to the picture document attribute, wherein the loading preprocessing includes: loading a data packet corresponding to the picture into a cache of the source code editor, determining a character region corresponding to the picture reference tag, and determining the character region as a pointer sensing region for current picture active display; receiving a pointer moving instruction issued by a target object, and in a case where a target pointer position positioned by the pointer moving instruction coincides with the pointer sensing region corresponding to the loading preprocessing, displaying preview content of the picture.

[0006] In an example embodiment, identifying a plurality of picture reference tags contained in a target document in a source code editor comprises: constructing a regular expression set for matching the plurality of picture reference tags contained in the target document, wherein the plurality of picture reference tags comprise: an image tag, a scalable vector graphics tag, an object tag, and an embed tag; performing a line-by-line scan on text content in the target document based on the regular expression set, and determining, based on a scan result, picture reference tags matched by each regular expression in the regular expression set, to obtain the plurality of picture reference tags.

[0007] In an example embodiment, after determining picture document properties corresponding to each picture in the plurality of picture reference tags, the above method further comprises: obtaining a resource path corresponding to each picture based on the picture document properties; and determining a resource path type corresponding to each picture based on a file extension corresponding to the resource path, wherein the resource path type comprises: a local resource path, a network resource path, and an embedded resource path, and the local resource path comprises: a relative path from a file location of the current target document to a file location of the picture, and an absolute path from a file root directory location of the target document to the file location of the picture.

[0008] In an example embodiment, after determining the resource path type corresponding to each picture based on the file extension corresponding to the resource path, the above method further comprises: in a case where the resource path type is determined to be the local resource path, obtaining a first resource locator of the target document, and determining a target path of the target document based on the first resource locator; combining the target path and a relative path corresponding to the picture using a preset function to obtain an absolute path corresponding to the picture; and loading the picture based on the absolute path using a preset file reading function to obtain preview content of the picture.

[0009] In an example embodiment, after determining the resource path type corresponding to each picture based on the file extension corresponding to the resource path, the above method further comprises: in a case where the resource path type is determined to be the network resource path, obtaining a second resource locator of the picture, and sending a request for previewing the picture to a remote server pointed to by the second resource locator; in a case where a response to the request from the remote server is received successfully, obtaining binary data of the picture, and converting the binary data into a target representation format for directly displaying the picture in the source code editor.

[0010] In one example embodiment, the target object sends a pointer moving instruction, and in the case that the target pointer position pointed to by the pointer moving instruction coincides with the pointer sensing area corresponding to the loading pre-processing, the preview content of the picture is displayed, including: determining the pointer sensing area according to the starting character position and the ending character position of each picture reference tag in the target document; and in the case that the target pointer position coincides with the pointer sensing area corresponding to any picture reference tag in the plurality of picture reference tags, displaying the preview content of the picture on the display interface.

[0011] According to another aspect of the embodiments of the present application, a picture preview device is further provided, including: an identification module configured to identify a plurality of picture reference tags contained in a target document in a source code editor; a determination module configured to determine picture document attributes corresponding to each picture in the plurality of picture reference tags, wherein the picture document attributes include: a resource path corresponding to the picture, and a picture type corresponding to the picture; a processing module configured to perform loading pre-processing on the picture according to the picture document attributes, wherein the loading pre-processing includes: loading a data packet corresponding to the picture into a cache of the source code editor, determining a character region corresponding to the picture reference tag, and determining the character region as a pointer sensing area for current picture active display; and a display module configured to receive a pointer moving instruction sent by a target object, and in the case that a target pointer position pointed to by the pointer moving instruction coincides with the pointer sensing area corresponding to the loading pre-processing, display the preview content of the picture.

[0012] According to still another aspect of the embodiments of the present application, a computer readable storage medium is further provided, and the computer readable storage medium stores a computer program, wherein the computer program is configured to execute the picture preview method when running.

[0013] According to still another aspect of the embodiments of the present application, an electronic device is further provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the picture preview method through the computer program.

[0014] According to still another aspect of the embodiments of the present application, a computer program product is further provided, including a computer program, and the computer program executes the picture preview method when executed by a processor.

[0015] In the embodiment of the present application, a plurality of picture reference tags contained in a target document in a source code editor are identified, picture document attributes corresponding to each picture in the plurality of picture reference tags are determined, wherein the picture document attributes include: a resource path corresponding to the picture, a picture type corresponding to the picture; the pictures are preprocessed according to the picture document attributes, wherein the preprocessing for loading is to load the data packet corresponding to the picture into the cache of the source code editor, to determine a character region corresponding to the picture reference tag, and to determine the character region as a pointer sensing region for current picture active display; a pointer moving instruction issued by a target object is received, and in a case where a target pointer position positioned by the pointer moving instruction coincides with the pointer sensing region corresponding to the preprocessing for loading, preview content of the picture is displayed. By using the above technical solution, the problem of how to directly and efficiently preview picture content referenced by various picture tags in an HTML file in an editor is solved, so as to improve the efficiency and fluency of front-end development. Furthermore, by identifying and analyzing the picture reference tags in the HTML document in the source code editor, preloading the pictures into the editor cache, and displaying the picture preview when the mouse hovers over the tag region, the front-end development efficiency is improved. BRIEF DESCRIPTION OF DRAWINGS

[0016] The accompanying drawings, which are incorporated herein and form a part of the specification, illustrate embodiments consistent with the present application and, together with the description, further serve to explain the principles of the application.

[0017] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the accompanying drawings needed to be used in the embodiments or prior art description will be briefly introduced. Obviously, for those skilled in the art, other drawings can also be obtained based on these drawings without creative labor.

[0018] Figure 1 is a hardware environment schematic diagram of a picture preview method according to an embodiment of the present application;

[0019] Figure 2 is a flowchart of a picture preview method according to an embodiment of the present application;

[0020] Figure 3 is a VS Code plug-in implementation flowchart according to an embodiment of the present application;

[0021] Figure 4 is a plug-in logic implementation structure schematic diagram according to an embodiment of the present application;

[0022] Figure 5 is a picture preview plug-in flowchart according to an embodiment of the present application;

[0023] Figure 6is a picture path analysis process schematic diagram according to an embodiment of the application;

[0024] Figure 7 is a Base64 encoded picture judgment flowchart according to an embodiment of the application;

[0025] Figure 8 is a network picture judgment process schematic diagram according to an embodiment of the application;

[0026] Figure 9 is a local picture preview path conversion process schematic diagram according to an embodiment of the application;

[0027] Figure 10 is a picture processing process schematic diagram according to an embodiment of the application;

[0028] Figure 11 is a local picture png format page schematic diagram according to an embodiment of the application;

[0029] Figure 12 is a local picture svg format page schematic diagram according to an embodiment of the application;

[0030] Figure 13 is a network picture page schematic diagram according to an embodiment of the application;

[0031] Figure 14 is a Base64 format picture page schematic diagram according to an embodiment of the application;

[0032] Figure 15 is a structure block diagram of a picture preview device according to an embodiment of the application. DETAILED DESCRIPTION

[0033] In order to make the personnel in the art better understand the application scheme, the technical solutions in the embodiments of the application will be clearly and completely described below in conjunction with the drawings in the embodiments of the application. Obviously, the described embodiments are only a part of the embodiments of the application, not all the embodiments. Based on the embodiments in the application, all other embodiments obtained by those of ordinary skill in the art without creative labor should belong to the scope of protection of the application.

[0034] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and in the above drawings are used to distinguish similar objects, and do not necessarily have to be used to describe a specific order or sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, device or device including a series of steps or units does not have to be limited to only those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to these processes, methods, devices or devices.

[0035] According to an aspect of an embodiment of the present application, a picture preview method is provided. The picture preview method is widely used in smart home, smart home, smart home device ecology, intelligence house ecology, and whole-house intelligent digital control application scenarios. Optionally, in the present embodiment, the picture preview method can be applied to the hardware environment composed of a terminal device 102 and a server 104 as shown in the figure. Figure 1 Figure 1 The figure is a hardware environment schematic diagram of a picture preview method according to an embodiment of the present application. As shown in the figure, the server 104 is connected with the terminal device 102 through a network, which can be used to provide services (such as application services, etc.) for the terminal or the client installed on the terminal, a database can be set on the server or independently of the server, which is used to provide data storage services for the server 104, cloud computing and / or edge computing services can be configured on the server or independently of the server, which is used to provide data operation services for the server 104. Figure 1

[0036] The above network can include but is not limited to at least one of the following: wired network, wireless network. The above wired network can include but is not limited to at least one of the following: wide area network, metropolitan area network, local area network, and the above wireless network can include but is not limited to at least one of the following: WIFI (Wireless Fidelity), Bluetooth. The terminal device 102 can not be limited to PC, mobile phone, tablet computer, smart air conditioner, smart oven, smart refrigerator, smart oven, smart oven, smart washing machine, smart water heater, smart washing device, smart dishwasher, smart projection device, smart television, smart clothesline, smart curtain, smart audio and video, smart socket, smart sound, smart sound box, smart fresh air equipment, smart kitchen and bathroom equipment, smart bathroom equipment, smart sweeping robot, smart window cleaning robot, smart mopping robot, smart air purification equipment, smart steamer, smart microwave oven, smart kitchen treasure, smart purifier, smart water dispenser, smart door lock, etc.​​

[0037] In the embodiment, a picture preview method is provided for the terminal device, Figure 2 is a flowchart of the picture preview method according to the embodiment of the application, and the flowchart includes the following steps:

[0038] In step S202, a plurality of picture reference tags contained in a target document in a source code editor are identified.

[0039] In step S204, picture document attributes corresponding to each picture in the plurality of picture reference tags are determined, wherein the picture document attributes include a resource path corresponding to the picture and a picture type corresponding to the picture.

[0040] In step S206, the pictures are preloaded according to the picture document attributes, wherein the preloading includes loading data packets corresponding to the pictures into a cache of the source code editor, determining a character region corresponding to the picture reference tags, and determining the character region as a pointer sensing region for active display of the current picture.

[0041] In step S208, a pointer movement instruction issued by a target object is received, and in a case where a target pointer position positioned by the pointer movement instruction coincides with a pointer sensing region corresponding to the preloading, preview content of the picture is displayed.

[0042] Through the above steps, a plurality of picture reference tags contained in a target document in a source code editor are identified, picture document attributes corresponding to each picture in the plurality of picture reference tags are determined, wherein the picture document attributes include a resource path corresponding to the picture and a picture type corresponding to the picture, the pictures are preloaded according to the picture document attributes, wherein the preloading includes loading data packets corresponding to the pictures into a cache of the source code editor, determining a character region corresponding to the picture reference tags, and determining the character region as a pointer sensing region for active display of the current picture, a pointer movement instruction issued by a target object is received, and in a case where a target pointer position positioned by the pointer movement instruction coincides with a pointer sensing region corresponding to the preloading, preview content of the picture is displayed. With the above technical solution, how to directly and efficiently preview picture content referenced by various picture tags in an HTML file in an editor is solved, and the efficiency and fluency of front-end development are improved. Furthermore, by identifying and analyzing picture reference tags in an HTML document in a source code editor, preloading pictures into an editor cache, and displaying picture preview when a mouse hovers over a tag region, the efficiency of front-end development is improved.

[0043] In one example embodiment, identifying a plurality of picture reference tags contained in a target document within a source code editor comprises: constructing a regular expression set for matching the plurality of picture reference tags contained in the target document, wherein the plurality of picture reference tags comprises: an image tag, a scalable vector graphics tag, an object tag, an embed tag; performing a line-by-line scan on text content in the target document based on the regular expression set, and determining, based on a scan result, picture reference tags matched by each regular expression in the regular expression set, to obtain the plurality of picture reference tags.

[0044] Optionally, an HTML document contains a plurality of picture reference tags: a tag (an image tag), <svg>tags (scalable vector graphics tags), <object>Tag (object tag), <embed> Tag (embedded tag). Wherein, Tag: for embedding images; <svg>Tag: for embedding scalable vector graphics; <object>Tag: used to embed various types of media objects, including images; <embed> Tag: used to embed external content, such as images, audio, video, etc.

[0045] It should be noted that the picture reference tag in this embodiment includes but is not limited to the above several, also includes: <iframe>Tag: used for embedding another HTML page. While primarily used for embedding pages, it can also be used to embed images (less commonly); <picture> tag: used for selecting image sources based on media query conditions.

[0046] To implement the real-time preview function of pictures within an HTML document, a set of regular expressions can be constructed to match the different types of picture reference tags mentioned above, as follows:

[0047] (1) tag regular expression: used to identify the src and alt attribute values to obtain the network address or local path of the image, as well as the alternative text; an example of the obtained local path is as follows:

[0048] Local path: .

[0049] Optionally, src stands for "source" and is used to specify the uniform resource locator or path of the image file. This is a mandatory attribute in the tag, and the value of the src attribute can be a relative path (relative to the directory where the HTML file is located), an absolute path, or even a uniform resource locator on the network.

[0050] Optionally, alt stands for "alternative text" and is used to provide alternative text for the image. When the image cannot be displayed for some reason (such as network problems, missing images, or users using screen readers), the browser will display the text defined in the alt attribute. This is very important for accessibility, ensuring that all users can understand the information conveyed by the images on the page. The alt attribute will contain the key information or description represented by the image.

[0051] (2) <svg> tag regular expression: specifically identifies the start and end of the <svg> tag, as well as the src attribute or directly embedded vector graphic code that may be carried within it;

[0052] (3) <object> tag regular expression: captures the data and type attributes to confirm the location and format of the image resource;

[0053] (4) <embed> tag regular expression: similar to <object>, but matches the src and type attributes of the <embed> tag to confirm the source and type of the image.

[0054] In an example embodiment, after determining the picture document attribute corresponding to each picture in the plurality of picture reference tags, the method further comprises: obtaining a resource path corresponding to each picture based on the picture document attribute; determining a resource path type corresponding to each picture based on a file extension of the resource path, wherein the resource path type comprises: a local resource path, a network resource path, and an embedded resource path, the local resource path comprises: a relative path from a file location where the current target document is located to a file location where the picture is located, and an absolute path from a file root directory location where the target document is located to the file location where the picture is located.

[0055] In short, the resource path of each picture is obtained. For local pictures, the resource path is relative or absolute; for network pictures, the resource path will be a complete URL (Uniform Resource Locator); for embedded resources, the resource path is Base64 encoded data. By checking the file extension corresponding to the resource path, the resource path type corresponding to each picture is determined. If the file extension is local-image.jpg and absolute-local-image.png, it can be determined that it is a local resource path. Further, local-image.jpg is a relative path and absolute-local-image.png is an absolute path. For online-image.webp, since its src attribute value starts with http or https, it is identified as a network resource path. For Base64 encoded pictures, the initial part of the src attribute data:image indicates that it is an embedded resource path.

[0056] In an example embodiment, after determining the resource path type corresponding to each picture based on the file extension of the resource path, the method further comprises: in a case where the resource path type is determined to be a local resource path, obtaining a first resource locator of the target document, and determining a target path of the target document based on the first resource locator; combining the target path and the relative path corresponding to the picture using a preset function to obtain an absolute path corresponding to the picture; loading the picture based on the absolute path using a preset file reading function to obtain the preview content of the picture.

[0057] Optionally, assuming that a development team is developing a Web project using VSCode editor, the project folder is located at C:\Users[Username]\Documents\MyProject, and the current target document is an HTML file index.html located in the project root directory.Now, a relative path image referenced in index.html needs to be previewed, the path is images / my-image.png. VSCode editor assigns a resource locator to each opened file. For example, for index.html, its locator can be file: / / / C: / Users / [Username] / Documents / MyProject / index.html. The actual path of the file is extracted from the above resource locator, which is C:\Users[Username]\Documents\MyProject. Using the resolve function of the path module in Node.js, which can combine a series of path fragments into an absolute path. The path C:\Users[Username]\Documents\MyProject where the target document is located and the relative path images / my-image.png where the image is located can be combined, so the absolute path of the image C:\Users[Username]\Documents\MyProject\images\my-image.png is obtained. Using the VSCode API or the file reading function (such as fs.readFile) in Node.js, the image data is loaded based on the absolute path of the image obtained in the previous step. In this way, the plugin can not only accurately and efficiently load and preview local image resources, but also simplify the developer's workflow and improve development efficiency.

[0058] In an example embodiment, after determining the resource path type corresponding to each image based on the file extension of the resource path, the above method further comprises: in the case of determining that the resource path type is a network resource path, obtaining a second resource locator of the image, and sending a request to preview the image to the remote server pointed to by the second resource locator; in the case of receiving a successful response to the request of the remote server, obtaining the binary data of the image, and converting the binary data into a target representation format for directly displaying the image in the source code editor.

[0059] Optionally, there is a line of code in an HTML document in a VSCode editor that references a network image: ; According to the website "https: / / example.com / assets / images / my-image.jpg" in the src attribute, it is determined that it is a network resource path.Next, the plugin initiates a GET request to "https: / / example.com / assets / images / my-image.jpg" using the get method from the http or https module in Node.js. If the response status code is 200 OK, it indicates that the image data has been successfully fetched, and the plugin collects the binary data from the response stream. If the response status code is not 200, or if there are other issues during the request, the plugin should log the error and possibly display to the user that the image preview is not available. The fetched image binary data is converted to Base64 encoding so that it can be directly shown in HTML or Markdown. Through the above steps, the plugin can safely fetch image data from a web server and efficiently preview these images within the VSCode editor, regardless of the binary format in which the images are stored on the web.

[0060] In one example embodiment, a pointer movement instruction issued by a target object is received, and in a case where a target pointer position to which the pointer movement instruction is positioned coincides with a pointer sensing area corresponding to a pre-processing loaded, a preview content of an image is displayed, including: determining a pointer sensing area according to a starting character position and an ending character position of each image reference tag in the target document; and in a case where the target pointer position coincides with a pointer sensing area corresponding to any image reference tag in the plurality of image reference tags, displaying the preview content of the image on the display interface.

[0061] It can be understood that the starting character position and the ending character position of each tag in the HTML document are obtained, thereby defining a sensing area. For example, the sensing area of the first tag may start from the 30th character of the document and end at the 90th character. The user's mouse movement instruction is continuously monitored in the editor. Whenever the mouse moves in the document, it is checked whether the current character position of the mouse coincides with the sensing area of any image reference. If the mouse position is indeed within the sensing area of a certain image reference, the previously described network image loading function (for network images) or local image loading function (for local images) is immediately called to load the image and display it in the floating window of the editor. By defining the sensing area of the image reference in the editor and displaying the preview content when the mouse hovers, not only the development efficiency is improved, but also the resource management and user interaction experience are optimized.

[0062] In order to better understand the process of the above image preview method, the following will further describe the above image preview method flow in conjunction with optional embodiments, but not for limiting the technical solutions of the embodiments of the present application.

[0063] In the related art, during the front-end development process, developers often need to use various image tags (such as img, svg, object, iframe, picture, embed, etc.) in HTML files to display images. Currently, to view the content of these images, developers need to open the actual directory where the image is located and click on the image file to preview, which is a relatively inefficient way. Although VSCode provides a plugin extension mechanism, there is still no complete solution that can directly preview the images referenced by various image tags in an HTML file in the editor.

[0064] To solve the above problems, an optional embodiment of this application proposes an implementation method for an image preview plugin in a VSCode editor. By identifying tags such as , <svg>, <object>, <iframe>, <picture>, and <embed> in an HTML file, this method can not only accurately capture the location information of image resources but also adopt corresponding loading strategies according to different resource types. For network images, HTTP / HTTPS requests are used to download image data from a remote server, and the image data is converted to Base64 encoding to meet the display requirements of the floating window in the editor; for local images and Base64-encoded images, the resources are directly accessed or the data is decoded, and the preview effect is also quickly presented when the mouse hovers. This significantly improves the efficiency and convenience of front-end developers when editing and debugging files containing image content in VSCode.

[0065] Optionally, Figure 3 is a schematic diagram of the implementation process of a VS Code plugin according to an embodiment of this application, which specifically includes the following steps:

[0066] Step 1: Initialize the plugin project. Initializing a VS Code plugin project is a basic setup step, mainly involving determining the basic information of the plugin, including key metadata such as the project name, description, and publisher. The project name is the unique identifier of the plugin, the description briefly summarizes the function of the plugin and the target users, and the publisher information is used to clarify the copyright ownership of the plugin. By correctly configuring this information in the package.json file, it can be ensured that the plugin has a clear identity and is recognizable during future development, testing, and even release to the market, facilitating communication between developers and users and the positioning and management of the plugin.

[0067] Step 2: Install plugin dependencies.In the development of VS Code plugins, installing the necessary dependencies is a crucial step to ensure that the plugin can utilize specific tools and libraries for building and running. This includes installing TypeScript, a strongly typed superset of JavaScript that provides better structure and type safety for the plugin code, and installing @types / vscode, which are the declaration files for the VS Code API (Application Programming Interface) of TypeScript, enabling plugin developers to enjoy code intelligent prompting and error checking in the IDE. By running the npm install typescript @types / vscode command, these dependencies can be automatically added to the package.json file of the plugin project, providing support for subsequent code writing and debugging, enhancing development efficiency and code quality.

[0068] Step three: Define plugin contribution points. In the development of VS Code plugins, "contribution points" refer to the extensions or customization functions that the plugin provides to the editor through specific configuration sections in its package.json file. Declare in the contributes field in package.json to activate the plugin when the developer executes a specific command.

[0069] Step four: Implement the plugin logic. As shown in Figure 4, Figure 4 is a schematic diagram of the implementation structure of a plugin logic according to an embodiment of the present application, which at least includes: a plugin activation module 42, an image preview provider 44, and a tool function module 46.

[0070] Optionally, the plugin activation module 42. The plugin activation module is a key component of the VSCode image preview plugin, responsible for managing the lifecycle of the plugin, ensuring that the plugin starts and is ready at the appropriate time to respond to the usage requirements of the developer. When the VSCode editor loads or opens a file containing HTML code, the activation module will automatically detect and then initialize the image preview function.In addition, the module is also responsible for registering the HoverProvider interface of the plugin, which is the core of the image preview implementation, allowing the plugin to capture the event when the mouse hovers over the image tag and trigger the image preview popup.

[0071] Optionally, the image preview provider 44. The image preview provider is the core functional module of the VSCode image preview plugin, mainly implementing the HoverProvider interface of the editor. This interface allows the plugin to intervene and display the image preview when the developer hovers the mouse over the image-related tags in the HTML file. By listening to and processing these hover events, the VSCode image preview plugin can analyze the source information of the image in the tag in real time, whether it is a local file path, a network URL, or Base64 encoded data.

[0072] The image preview provider can use corresponding logic to load or decode image data according to the type of image source. For local images, the relative path is converted to an absolute path and loaded; for network images, a secure HTTP / HTTPS request is initiated, and after downloading the image data, it is converted to Base64 format for display; for Base64 encoded images, the plugin directly uses the encoded data for preview. The image preview provider can generate and display the image preview in the editor's floating window, supporting multiple image formats including JPG, PNG, SVG, WebP, greatly enriching the preview experience of developers and improving the efficiency of front-end development.

[0073] Optionally, the tool function module 46. This module contains image tag recognition functions that can efficiently scan and locate, <svg>, <object> and other image-related tags in HTML files. Secondly, this module provides image path parsing functions that can accurately analyze the src attributes in these tags, whether they are relative paths or absolute paths, or even network URLs or Base64 encoded strings, which can be effectively converted and parsed for further processing and preview. In addition, the tool function module also contains image type judgment methods that can intelligently identify whether the image is stored locally, loaded from the network, or encoded in Base64 format, thereby guiding the image preview provider to adopt appropriate strategies for loading and displaying.

[0074] As an optional embodiment, Figure 5 is a schematic flowchart of a picture preview plugin according to an embodiment of the present application, specifically including the following steps:

[0075] Step 1: Picture tag recognition. Use regular expressions to detect whether the tags in the HTML page are picture resource tags. The purpose of this regular expression is to match a specific set of HTML tags that are commonly used to embed images or image-like content. Specifically, the tags to be matched are as follows:

[0076] (1) : Used to embed images.

[0077] (2) <svg>: Used to embed scalable vector graphics.

[0078] (3) <object>: Used to embed various types of media objects, including images.

[0079] (4) <iframe>: Used to embed another HTML page. Although mainly used to embed pages, it can also be used to embed images (less common).

[0080] (5) <picture>: Used to select image sources according to media query conditions.

[0081] (6) <embed>: Used to embed external content, such as images, audio, video, etc.

[0082] Step 2: Picture path parsing.As shown in Figure 6, Figure 6 is a schematic diagram of a picture path parsing process according to an embodiment of the present application, specifically including the following steps:

[0083] Step 2.1: Parse the picture path in a line of text and return the corresponding processing result according to different path types; if "src" or "data" is matched, try to match the string in the format of "src" or "data:image" from the input line; if nothing is matched, return null; if a path is matched, continue to process.

[0084] Step 2.2: Extract the matched path, check whether the path is a network picture or a Base64-encoded picture. If it is a network or Base64 picture, directly return the path; if it is not a network or Base64 picture, convert it to an absolute path and return the processed absolute path.

[0085] Optionally, checking whether the path is a network picture or a Base64-encoded picture specifically includes:

[0086] (1) Judgment of Base64-encoded pictures: Check whether the input string conforms to the format of "data:image / type, Base64". If the string conforms to the format, return true; if the string does not conform to the format, return false. As shown in Figure 7, Figure 7 is a flowchart of judging Base64-encoded pictures according to an embodiment of the present application.

[0087] (2) Judgment of network pictures: If the string starts with "http: / / " or "https: / / ", return true. If the string does not start with these prefixes, return false.As shown in Figure 8, which is a network picture judgment flowchart according to an embodiment of the present application, Figure 8 is a network picture judgment flowchart according to an embodiment of the present application.

[0088] Optionally, Figure 9 is a local picture preview path conversion flowchart according to an embodiment of the present application, and the specific process is as follows:

[0089] (1) Obtain the document directory: if the user hovers over the HTML tag containing the picture reference in the editor, the plug-in needs to first determine the directory of the HTML file. This operation is usually performed by calling the API of VSCode, specifically, the vscode.window.activeTextEditor.document.uri.fsPath is used to obtain the file system path of the current active document.

[0090] (2) Combine the absolute path: from the file system path obtained above, the path.dirname() function of Node.js is used to extract the path of the directory where the HTML file is located. The path.dirname() function removes the last directory or file name in the path and returns the parent directory path. The plug-in needs to combine the directory path with the relative path of the picture to form a complete absolute path.

[0091] (3) Return the absolute path: in order to ensure the correctness of the path, the path.resolve() function is used to finally determine the absolute path of the picture. path.resolve() calculates an absolute path based on the current working directory and all the picture path segments passed in.

[0092] Optionally, when the mouse hovers over the tag referencing the local picture, the picture tag is identified by regular expression; the relative path of the picture is parsed and converted to an absolute path, the directory where the document is located is obtained according to the URI of the document, and the given picture path is parsed to an absolute path; the picture is loaded using the URI mechanism of VSCode, the URI path of the document is replaced with the specified picture path using the vscode-resource protocol, the generated picture URI is inserted into the Markdown text, and the maximum height style is set; the picture preview is displayed in the floating window.

[0093] It should be noted that the security policy of VSCode restricts direct loading of network pictures in order to protect users from potential security risks. When a plugin attempts to load resources from the network, the following risks may be introduced:

[0094] (1) Malicious content: Pictures on the network may be embedded with malicious code or links that can be used for cyber attacks, such as cross-site scripting (XSS).

[0095] (2) Tracking user behavior: If direct loading of network pictures is allowed, remote servers can track user activity by analyzing requests, which violates user privacy.

[0096] (3) Data leakage: Some picture loading requests may contain sensitive information, such as authentication tokens or other personally identifiable information (PII), which can be intercepted by third parties if these information is passed through URL parameters.

[0097] (4) Man-in-the-middle attack: In an insecure network environment, unencrypted network picture loading requests are vulnerable to man-in-the-middle attacks, causing the loaded content to be tampered with or replaced.

[0098] Step 3: Network picture processing. Because of the security policy of VSCode restricting direct loading of network pictures, special processing of network pictures is required before they can be displayed.As shown in Figure 10, Figure 10 is a schematic diagram of an image processing process according to an embodiment of the present application, specifically including the following steps:

[0099] Step 3.1: The function starts to execute.

[0100] Step 3.2: Determine the URL protocol. Select to use the https or http module according to whether the URL starts with https.

[0101] Step 3.3: Use the HTTPS module / Use the HTTP module. Select the corresponding HTTP module according to the protocol.

[0102] Step 3.4: Initiate a GET request. Initiate a GET request using the selected module.

[0103] Step 3.5: Check whether the status code is 200. Check whether the status code of the response is 200.

[0104] Step 3.6: Throw an HTTP error. If the status code is not 200, throw an HTTP error.

[0105] Step 3.7: Collect the response data. If the status code is 200, start to collect the response data.

[0106] Step 3.8: Wait for the response to end. Wait for all data to be received.

[0107] Step 3.9: Merge the data and convert it to Base64. Merge the received data and convert it to a Base64 encoded string.

[0108] Step 3.10: Return the Base64 string. Return the final Base64 string.

[0109] Step 3.11: Throw a request error. If an error occurs during the request process, throw an error.

[0110] Optionally, when the mouse hovers over the tag referencing the network picture, the network picture URL is identified; the picture data is obtained through HTTP / HTTPS request; the picture data is converted into Base64 format, as described in step 3 "Network picture processing"; and the Base64 encoded picture is displayed in the floating window.

[0111] Optionally, when the mouse of the developer hovers over the picture tag on the HTML page, a pop-up box is automatically displayed to show the content of the picture. As shown in FIG. 11, which is a local picture png format page according to an embodiment of the present application, when the mouse of the developer hovers over the picture tag on the HTML page, a pop-up box is automatically displayed to show the content of the picture. As shown in FIG. 11, which is a local picture png format page according to an embodiment of the present application, when the mouse of the developer hovers over the picture tag on the HTML page, a pop-up box is automatically displayed to show the content of the picture. As shown in FIG. 11, which is a local picture png format page according to an embodiment of the present application, when the mouse of the developer hovers over the picture tag on the HTML page, a pop-up box is automatically displayed to show the content of the picture. As shown in FIG. 11, which is a local picture png format page according to an embodiment of the present application, when the mouse of the developer hovers over the picture tag on the HTML page, a pop-up box is automatically displayed to show the content of the picture. As shown in FIG. 11, which is a local picture png format page according to an embodiment of the present application, when the mouse of the developer hovers over the picture tag on the HTML page, a pop-up box is automatically displayed to show the content of the picture. As shown in FIG. 11, which is a local picture png format page according to an embodiment of the present application, when the mouse of the developer hovers over the picture tag on the HTML page, a pop-up box is automatically displayed to show the content of the picture. As shown in FIG. 11, which is a local picture png format page according to an embodiment of the present application, when the mouse of the developer hovers over the picture tag on the HTML page, a pop-up box is automatically displayed to show the content of the picture.

[0112] Optionally, as shown in FIG. 12, FIG. 12 is a schematic diagram of a local picture svg format page according to an embodiment of the present application. It can be seen that the tag is used to reference the SVG picture file, and the src attribute contains the path pointing to the SVG file, for example, / img / icon.svg. This means that the SVG picture file icon.svg is located in the img folder under the same directory as the HTML file, or is another path relative to the directory where the HTML file is located. In the embodiment of the present application, when the developer browses the HTML file containing such SVG picture reference in the VSCode editor and moves the mouse over the tag, the plug-in responds quickly. First, it accurately identifies the SVG file path in the src attribute through the internal picture path parsing mechanism. Then, the plug-in converts the relative path to an absolute path to ensure accurate positioning to the actual location of the SVG picture file.

[0113] Optionally, FIG. 13 is a schematic diagram of a network picture page according to an embodiment of the present application. FIG. 13 contains a reference to a network picture. Specifically, the src attribute of the tag points to a picture URL that can be accessed through the Internet, for example, https: / / scdn.sojson.com / ui / images / web.logo.png. This indicates that the picture is not stored in the local file system, but is hosted on a remote server for the web page to dynamically pull when loading. In the plug-in embodiment of the present application, when the user edits the HTML file containing the network picture reference in the VSCode editor, the plug-in starts the network picture preview process as soon as the mouse is hovered over the tag. The plug-in identifies the URL in the src attribute as the source of the network picture.To avoid the security and privacy issues caused by directly loading network resources, the plug-in uses an indirect method, that is, by initiating an HTTP or HTTPS request to obtain the original data of the picture, and then converting the data into Base64 encoding format. After completing the encoding conversion, the Base64 format picture data is inserted into a Markdown text for instant preview.

[0114] Optionally, FIG. 14 is a schematic diagram of a Base64 format picture page according to an embodiment of the present application. In FIG. 14, the tag uses Base64 encoding format to inline picture data, instead of traditional file path or network URL. In the src attribute of the tag, the string starting with data:image / jpeg,base64 can be seen, followed by the Base64 encoded picture data. This format allows the picture file to be directly embedded into the HTML document, eliminating the need for separate file references. When opening and editing such an HTML file containing Base64 encoded pictures in the VSCode editor, the user only needs to hover the mouse over the tag. The plug-in immediately recognizes the presence of Base64 encoding in the src attribute and intelligently parses the encoded string to extract the actual content of the picture. Without network requests or local file reading, the plug-in can directly pop up a preview window near the mouse position to display the decoded view of the Base64 encoded picture. The preview window not only provides an instant view of the picture, but also may include picture size adjustment functions to ensure the comfort and clarity of the preview effect.

[0115] Step five: package and release the plug-in. The core logic of the plug-in has been developed, and the plug-in is released to the plug-in market. Developers can search and install this plug-in to use the plug-in to protect the configuration file.

[0116] As described above, by recognizing tags such as , <svg>, <object>, <iframe>, <picture>, and <embed> in HTML files, the present application can not only accurately capture the location information of picture resources, but also take appropriate loading strategies according to different resource types.For network pictures, the picture data is downloaded from a remote server using HTTP / HTTPS requests and converted to Base64 encoding to meet the display requirements of the editor's floating window. For local pictures and Base64 encoded pictures, the resources are directly accessed or the data is decoded, and the preview effect is quickly presented when the mouse hovers. This significantly improves the efficiency of front-end developers when editing and debugging files containing picture content in VSCode, allowing them to preview picture content without leaving the editor, reducing file switching operations, and improving the development experience.

[0117] From the above description of the embodiments, those skilled in the art can clearly understand that the picture preview method according to the above embodiments can be implemented by means of software and the necessary general hardware platform, of course, it can also be implemented by hardware, but in many cases the former is a better implementation. Based on this understanding, the technical solutions of the present application can be embodied in the form of a software device, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for making a terminal device (which can be a mobile phone, computer, server, or network device, etc.) execute the picture preview method of each embodiment of the present application.

[0118] In this embodiment, an execution device for a picture preview task is also provided, which is used to implement the above embodiments and preferred embodiments, and will not be described again. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, hardware or a combination of software and hardware is also possible and contemplated.

[0119] FIG. 15 is a structural block diagram of a picture preview device according to an embodiment of the present application; as shown in FIG. 15, it comprises:

[0120] an identification module 152, configured to identify a plurality of picture reference tags contained in a target document in a source code editor;

[0121] a determination module 154, configured to determine picture document attributes corresponding to each picture in the plurality of picture reference tags, wherein the picture document attributes comprise: a resource path corresponding to the picture, and a picture type corresponding to the picture;

[0122] a processing module 156, configured to perform loading preprocessing on the picture according to the picture document attributes, wherein the loading preprocessing comprises: loading a data packet corresponding to the picture into a cache of the source code editor, determining a character region corresponding to the picture reference tag, and determining the character region as a pointer sensing region for current picture active display;

[0123] and a display module 158, configured to receive a pointer moving instruction issued by a target object, and display preview content of the picture in a case where a target pointer position positioned by the pointer moving instruction coincides with a pointer sensing region corresponding to the loading preprocessing.

[0124] Through the above device, a bill image uploaded by a target object through an application programming interface is received, wherein the bill image contains a to-be-verified seal; a first contour feature corresponding to the to-be-verified seal in the bill image is extracted, and a similarity calculation is performed on the first contour feature and a second contour feature corresponding to a preset standard seal; in a case where the calculation result indicates that the first contour feature is similar to the second contour feature, angle matching processing is performed on the to-be-verified seal and the preset standard seal; and the authenticity of the to-be-verified seal is determined based on a result of the angle matching processing. By using the above technical solution, the problem that an electronic seal verification system is complex, time-consuming and has a heavy system architecture in Web end operation is solved.Further, by directly comparing the seal profile features in the uploaded bill image with the standard seal profile similarity on the Web side, the angle matching of the profile similar seal is performed to determine the authenticity of the seal, without the need for plug-ins or service support, quickly verifying the authenticity of the seal, effectively simplifying the operation process and system architecture, and improving the seal checking efficiency and user experience. By using the above technical scheme, the problem of how to directly and efficiently preview the picture content referenced by various picture tags in the HTML file in the editor is solved, so as to improve the efficiency and smoothness of front-end development. Further, by identifying and analyzing the picture reference tags in the HTML document in the source code editor, the picture is preloaded to the editor cache, and the picture preview is displayed when the mouse hovers over the tag area, so as to improve the front-end development efficiency.

[0125] In an example embodiment, identifying a plurality of picture reference tags contained in a target document in a source code editor comprises: constructing a regular expression set for matching the plurality of picture reference tags contained in the target document, wherein the plurality of picture reference tags comprise: an image tag, a scalable vector graphics tag, an object tag, and an embedded tag; performing line-by-line scanning on the text content in the target document based on the regular expression set, and determining the picture reference tags matched by each regular expression in the regular expression set based on the scanning result to obtain the plurality of picture reference tags.

[0126] In an example embodiment, the above-mentioned identification module is further configured to determine the picture document attribute corresponding to each picture in the plurality of picture reference tags, and the above-mentioned method further comprises: obtaining a resource path corresponding to each picture based on the picture document attribute; and determining a resource path type corresponding to each picture based on the file extension of the resource path, wherein the resource path type comprises: a local resource path, a network resource path, and an embedded resource path, and the local resource path comprises: a relative path from the file location of the current target document to the file location of the picture, and an absolute path from the file root directory location of the target document to the file location of the picture.

[0127] In an example embodiment, the above-mentioned identification module further comprises: a first obtaining unit configured to, after determining the resource path type as a local resource path, obtain a first resource locator of the target document based on the file extension of the resource path, and determine a target path of the target document based on the first resource locator; combine the target path and the relative path corresponding to the picture using a preset function to obtain an absolute path corresponding to the picture; and load the picture based on the absolute path using a preset file reading function to obtain the preview content of the picture.

[0128] In one example embodiment, the identification module described above further comprises: a second acquisition unit, configured to, after determining the resource path type of each picture based on the file extension corresponding to the resource path, acquire a second resource locator of the picture and send a request for previewing the picture to a remote server pointed by the second resource locator in the case where the resource path type is determined to be a network resource path; and in the case where a response to the request from the remote server is received successfully, acquire binary data of the picture and convert the binary data into a target representation format for directly displaying the picture in the source code editor.

[0129] In one example embodiment, the display module described above is further configured to determine a pointer sensing area according to the starting character position and the ending character position of each picture reference tag in the target document in the target pointer position coincides with the pointer sensing area corresponding to any picture reference tag in the plurality of picture reference tags, display the preview content of the picture on the display interface.

[0130] Embodiments of the present application also provide a storage medium comprising a stored program, wherein the program performs any of the picture preview methods described above when executed.

[0131] Optionally, in the present embodiment, the storage medium can be configured to store program code for performing the following steps:

[0132] S1, identify a plurality of picture reference tags contained in a target document in a source code editor; and

[0133] S2, determine picture document attributes corresponding to each picture in the plurality of picture reference tags, wherein the picture document attributes comprise a resource path corresponding to the picture and a picture type corresponding to the picture; and

[0134] S3, perform loading preprocessing on the picture according to the picture document attributes, wherein the loading preprocessing comprises loading a data packet corresponding to the picture into a cache of the source code editor, determining a character area corresponding to the picture reference tag, and determining the character area as a pointer sensing area for currently active display of the picture; and

[0135] S4, receive a pointer moving instruction issued by a target object, and in the case where the target pointer position pointed to by the pointer moving instruction coincides with the pointer sensing area corresponding to the loading preprocessing, display preview content of the picture.

[0136] Embodiments of the present application also provide an electronic device comprising a memory and a processor, the memory storing a computer program, and the processor being configured to execute the computer program to perform the steps of any of the method embodiments described above.

[0137] Embodiments of the present application also provide a computer program product comprising a computer program, which, when executed by a processor, performs the steps of any of the method embodiments described above.

[0138] Optionally, the electronic device described above can further comprise a transmission device and an input / output device, wherein the transmission device is connected to the processor, and the input / output device is connected to the processor.

[0139] Optionally, in the embodiment, the processor can be configured to perform the following steps by the computer program:

[0140] S1, identifying a plurality of picture reference tags contained in a target document in a source code editor;

[0141] S2, determining picture document attributes corresponding to each picture in the plurality of picture reference tags, wherein the picture document attributes comprise a resource path corresponding to the picture and a picture type corresponding to the picture;

[0142] S3, performing loading preprocessing on the picture according to the picture document attributes, wherein the loading preprocessing comprises loading a data packet corresponding to the picture into a cache of the source code editor, determining a character region corresponding to the picture reference tag, and determining the character region as a pointer sensing region for current picture active display;

[0143] S4, receiving a pointer moving instruction issued by a target object, and displaying preview content of the picture in a case where a target pointer position positioned by the pointer moving instruction coincides with the pointer sensing region corresponding to the loading preprocessing.

[0144] Optionally, in the embodiment, the storage medium can include but is not limited to a U disk, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk or an optical disk, and various media capable of storing program codes.

[0145] Optionally, specific examples in the embodiment can refer to the examples described in the above embodiments and optional implementation manners, and the embodiment will not be described here again.

[0146] According to the technical scheme of the present application, the collection, storage, use, processing, transmission, provision and disclosure of the financial data or user data and other information comply with the relevant laws and regulations and do not violate public order and good customs.

[0147] It should be noted that in the embodiments of the present application, some software, components, models and other existing solutions in the industry may be mentioned, which should be considered as exemplary, and the purpose is only to illustrate the feasibility of the implementation of the technical scheme of the present application, but it does not mean that the applicant has or will necessarily use the solution.

[0148] Obviously, those skilled in the art should understand that the above-mentioned modules or steps of the present application can be realized by a general computing device, which can be concentrated on a single computing device or distributed on a network composed of multiple computing devices. Alternatively, they can be realized by program codes executable by a computing device, so that they can be stored in a storage device and executed by a computing device, and in some cases, the steps shown or described can be executed in an order different from that shown here, or they can be manufactured into individual integrated circuit modules, or a plurality of modules or steps can be manufactured into a single integrated circuit module. Thus, the present application is not limited to any specific combination of hardware and software.

[0149] The above is only the preferred embodiment of the present application, and it should be pointed out that for those skilled in the art, without departing from the principle of the present application, a number of improvements and refinements can be made, and these improvements and refinements should be considered as the protection scope of the present application.< / iframe> < / object> < / svg> < / object> < / svg>

Claims

1. A method for previewing images, characterized in that, include: Identify multiple image reference tags contained in a target document within a source code editor; Determine the image document attributes corresponding to each image in the plurality of image reference tags, wherein the image document attributes include: the resource path corresponding to the image and the image type corresponding to the image; The image is preprocessed according to the image document attributes. The preprocessing includes loading the data package corresponding to the image into the cache of the source code editor, determining the character area corresponding to the image reference tag, and determining the character area as the pointer sensing area for the current image to be actively displayed. Receive pointer movement instructions from the target object, and if the target pointer position located by the pointer movement instructions coincides with the pointer sensing area corresponding to the preprocessing, display the preview content of the image.

2. The image preview method according to claim 1, characterized in that, Identify multiple image reference tags contained in the target document within the source code editor, including: Construct a set of regular expressions for matching multiple image reference tags contained in the target document, wherein the multiple image reference tags include: image tags, scalable vector graphics tags, object tags, and embed tags; The text content in the target document is scanned line by line based on the set of regular expressions, and the image reference tags matched by each regular expression in the set of regular expressions are determined based on the scanning results, thus obtaining the multiple image reference tags.

3. The image preview method according to claim 1, characterized in that, After determining the image document attributes corresponding to each image in the plurality of image reference tags, the method further includes: The resource path corresponding to each image is obtained based on the image document attributes; The resource path type corresponding to each image is determined based on the file extension corresponding to the resource path. The resource path type includes: local resource path, network resource path, and embedded resource path. The local resource path includes: a relative path from the file location of the current target document to the file location of the image, and an absolute path from the root directory of the target document to the file location of the image.

4. The image preview method according to claim 3, characterized in that, After determining the resource path type for each image based on the file extension corresponding to the resource path, the method further includes: If the resource path type is determined to be the local resource path, the first resource locator of the target document is obtained, and the target path of the target document is determined based on the first resource locator. The target path and the relative path corresponding to the image are combined using a preset function to obtain the absolute path corresponding to the image; The image is loaded using a preset file reading function based on the absolute path to obtain a preview of the image.

5. The image preview method according to claim 3, characterized in that, After determining the resource path type for each image based on the file extension corresponding to the resource path, the method further includes: If the resource path type is determined to be the network resource path, the second resource locator of the image is obtained, and a request to preview the image is sent to the remote server pointed to by the second resource locator. Upon receiving a successful response to the remote server request, the binary data of the image is obtained, and the binary data is converted into the target representation format for direct display of the image within the source code editor.

6. The image preview method according to claim 1, characterized in that, Receiving a pointer movement command from the target object, and if the target pointer position located by the pointer movement command coincides with the pointer sensing area corresponding to the preprocessing, displaying a preview of the image, including: The pointer sensing area is determined based on the start and end character positions of each of the plurality of image reference tags in the target document; When the target pointer position coincides with the pointer sensing area corresponding to any of the multiple image reference tags, a preview of the image is displayed on the display interface.

7. An image preview device, characterized in that, include: The recognition module is used to identify multiple image reference tags contained in the target document within the source code editor; The determining module is used to determine the image document attributes corresponding to each image in the plurality of image reference tags, wherein the image document attributes include: the resource path corresponding to the image and the image type corresponding to the image; The processing module is used to perform loading preprocessing on the image according to the image document attributes, wherein the loading preprocessing includes loading the data package corresponding to the image into the cache of the source code editor, determining the character area corresponding to the image reference tag, and determining the character area as the pointer sensing area for the current image to be actively displayed. The display module is used to receive pointer movement instructions issued by the target object, and to display the preview content of the image when it is determined that the target pointer position located by the pointer movement instruction coincides with the pointer sensing area corresponding to the preprocessing loading.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, wherein when the computer program is executed by a processor, it implements the steps of the image preview method according to any one of claims 1 to 6.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the image preview method according to any one of claims 1 to 6.

10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the image preview method according to any one of claims 1 to 6.

Images