Image display method and device and electronic equipment

Abstract

The invention discloses an image display method and device and electronic equipment, and belongs to the technical field of computers. The method comprises the following steps: receiving a first input of a first image identifier in a content detail interface; and displaying a first image corresponding to the first image identifier in response to the first input.

Description

Technical Field

[0001] This application belongs to the field of computer technology, and specifically relates to an image display method, apparatus and electronic device. Background Technology

[0002] With the widespread adoption of mobile internet and the improvement of electronic device performance, social media platforms have become important channels for users to obtain information, share their lives, and engage in social interaction. Among various social media applications, the combination of text and images dominates the content format; that is, user-posted content often includes multiple images and one or more paragraphs of text description, presenting information in a richer and more intuitive way. This multi-image and text model has significant advantages in information expression and can meet users' diverse content creation and consumption needs.

[0003] However, current social media platforms generally suffer from user experience pain points in handling the interaction between text descriptions and images. Specifically, when users browse content, the text descriptions often mention or reference specific images, such as "see details..." Figure X The text includes phrases like "P3 shows details," etc. However, if a user wants to view the corresponding image mentioned in the text, they typically need to manually swipe up or down the screen to search for the target image among multiple pictures. This process is particularly cumbersome and time-consuming when there are many images, severely reducing the user's information retrieval efficiency. Summary of the Invention

[0004] The purpose of this application is to provide an image display method, apparatus, and electronic device that can improve the efficiency of information acquisition for users when browsing multi-text and image content.

[0005] In a first aspect, embodiments of this application provide an image display method, including: Receive the first input for the first image identifier in the content details interface; In response to the first input, the first image corresponding to the first image identifier is displayed.

[0006] Secondly, embodiments of this application provide an image display device, including: The input module is used to receive the first input for the first image identifier in the content details interface; The display module is used to display the first image corresponding to the first image identifier in response to the first input.

[0007] Thirdly, embodiments of this application provide an electronic device including a processor and a memory, wherein the memory stores programs or instructions executable on the processor, and the programs or instructions, when executed by the processor, implement the steps of the method described in the first aspect.

[0008] Fourthly, embodiments of this application provide a readable storage medium on which a program or instructions are stored, which, when executed by a processor, implement the steps of the method described in the first aspect.

[0009] Fifthly, embodiments of this application provide a chip, the chip including a processor and a communication interface, the communication interface being coupled to the processor, the processor being used to run programs or instructions to implement the method as described in the first aspect.

[0010] In a sixth aspect, embodiments of this application provide a computer program product stored in a storage medium, which is executed by at least one processor to implement the method described in the first aspect.

[0011] In this embodiment of the application, if a first input is received for a first image identifier in the content details interface, since there is a correspondence between each image identifier and each image in the content details interface, the first image corresponding to the first image identifier is displayed in response to the first input. That is, when the user makes a first input for the first image identifier, the first image corresponding to the first image identifier can be automatically and accurately located and displayed, thereby saving the user the tedious step of manually swiping to find the corresponding image and significantly improving the user's information acquisition efficiency when browsing multi-image and text content. Attached Figure Description

[0012] Figure 1 This is a flowchart illustrating an image display method provided in some embodiments of this application; Figure 2 These are schematic diagrams showing the content details interface provided in some embodiments of this application; Figure 3 These are schematic diagrams showing the content details interface provided in some embodiments of this application; Figure 4 This is a schematic diagram showing the prompt icons provided in some embodiments of this application; Figure 5 This is a schematic diagram showing the prompt icons provided in some embodiments of this application; Figure 6 This is a schematic diagram showing the return icon provided in some embodiments of this application; Figure 7 This is a schematic flowchart illustrating the image display method provided in some embodiments of this application; Figure 8 This is a schematic diagram showing a thumbnail image provided in some embodiments of this application; Figure 9 This is a schematic diagram showing multiple thumbnail images provided in some embodiments of this application; Figure 10 This is a magnified display schematic diagram of multiple thumbnail images provided in some embodiments of this application; Figure 11 This is a magnified schematic diagram of a thumbnail image provided in some embodiments of this application; Figure 12 These are schematic diagrams of the structure of an image display device provided in some embodiments of this application; Figure 13 These are structural block diagrams of electronic devices provided in some embodiments of this application; Figure 14 These are structural block diagrams of electronic devices provided in some embodiments of this application. Detailed Implementation

[0013] The technical solutions of the embodiments of this application will be clearly described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this application. All other embodiments obtained by those skilled in the art based on the embodiments of this application are within the scope of protection of this application.

[0014] The terms "first," "second," etc., used in the specification and claims of this application are used to distinguish similar objects and not to describe a specific order or sequence. It should be understood that such terms can be used interchangeably where appropriate so that embodiments of this application can be implemented in orders other than those illustrated or described herein, and the objects distinguished by "first," "second," etc., are generally of the same class and the number of objects is not limited; for example, a first object can be one or more. Furthermore, in the specification and claims, "and / or" indicates at least one of the connected objects, and the character " / " generally indicates that the preceding and following objects are in an "or" relationship.

[0015] Currently, when users browse content, if they want to view the corresponding image mentioned in the text, they need to search for the target image one by one among multiple images. This process is particularly tedious and time-consuming when there are many images, seriously affecting the user's reading flow and information acquisition efficiency. For example, in a long note containing 20 images, if the text description of a product feature mentions "Please refer to..." Figure X Users need to manually swipe through the image area from their current text position until they find the Xth image. This frequent, non-linear operation not only increases the user's cognitive load and disrupts the reading immersion, but also reduces overall user satisfaction. Especially on the small screens of mobile devices, swiping through image areas often requires more precise finger control, further exacerbating the inconvenience of the operation.

[0016] Existing technologies include hyperlinks, which allow users to click on text or images to jump to new pages or specific locations on the current page. For example, in web design, anchor points within a page can be used for navigation. However, social media applications lack interactive technology between text descriptions and images. Furthermore, while some social media platforms may offer image preview or zoom functions, these primarily serve the purpose of viewing the image itself; users still need to locate the image first before previewing or zooming in, failing to fundamentally solve the core problem of "text mentioning an image, but the image needs to be manually found."

[0017] Therefore, embodiments of this application provide an image display method, apparatus, and electronic device that can automatically and accurately locate and display the image corresponding to the image identifier, thereby saving users the tedious steps of manually swiping to find the image and significantly improving the user's information acquisition efficiency.

[0018] The image display method provided in this application will be described below with reference to the accompanying drawings, through specific embodiments and application scenarios.

[0019] like Figure 1 As shown in the figure, this application provides an image display method, which may specifically include the following steps: Step 101: Receive the first input for the first image identifier in the content details interface.

[0020] Specifically, when a user is browsing the content area in the content details interface, since the content area contains image icons, which are interactive elements in the content area, the user can make the first input on any image icon in the content area.

[0021] In some embodiments of this application, the first input is used to trigger graphic and text interaction, and the first input can be a first operation. Exemplarily, the first input includes, but is not limited to: touch input or click input of the first image identifier by the user through a touch device such as a finger or stylus, or a voice command input by the user, or a specific gesture input by the user, or other feasible inputs. The specific input can be determined according to actual usage needs, and this embodiment of the invention does not impose limitations. For example, the first input can be: a click input of the first image identifier by the user.

[0022] The specific gesture in this application embodiment can be any one of the following: single-click gesture, swipe gesture, drag gesture, pressure recognition gesture, long-press gesture, area change gesture, double-press gesture, and double-tap gesture; In this embodiment, the click input can be a single click, a double click, or any number of clicks, or it can be a long press or a short press.

[0023] Step 102: In response to the first input, display the first image corresponding to the first image identifier.

[0024] Specifically, since each image identifier in the content area corresponds to a specific image, meaning there is a relationship between each image identifier and an image, upon receiving the user's first input for a first image identifier, in response to the first input, the first image corresponding to the first image identifier can be determined based on the aforementioned correspondence between image identifiers and images, and then displayed in the current content details interface. The number of first images can be one or multiple.

[0025] In the above embodiments, after capturing the first input for the first image identifier, the corresponding first image is automatically and accurately located in the current content details interface according to the correspondence between the image identifier and the image. This automates the tedious steps of manually swiping to find the image, allowing users to directly access the first image with just a click. This greatly reduces the number of operation steps and cognitive load, improves information acquisition efficiency and user satisfaction, and enhances the fluency and immersion of reading.

[0026] In this embodiment of the application, if a first input is received for a first image identifier in the content details interface, since there is a correspondence between each image identifier and each image in the content details interface, the first image corresponding to the first image identifier is displayed in response to the first input. That is, when the user makes a first input for the first image identifier, the first image corresponding to the first image identifier can be automatically and accurately located and displayed, thereby saving the user the tedious step of manually swiping to find the corresponding image and significantly improving the user's information acquisition efficiency when browsing multi-image and text content.

[0027] The process of establishing the correspondence between image identifiers and images is illustrated below through a specific embodiment: The method further includes steps 103 to 105: Step 103: Recognize the image identifiers of the content in the content area of ​​the content details interface.

[0028] Specifically, during the content publishing phase, users enter text content and upload at least one image through the social media app's editing interface. When the user finishes editing and clicks the "Publish" button, the social media app sends the text content and image to the server.

[0029] First, the server obtains the text content, for example: Figure 2 As shown, the text content is: "I went to XX Park today. The scenery was beautiful, see pictures A and B. Picture C is the sunset." The server retrieved 18 images, and is currently displaying the first one. For example: Figure 3As shown, the text content is: "Went to XX Park today. The scenery is beautiful. See the image above." At the same time, the server obtains 18 images, and currently the first image is displayed.

[0030] For each image, generate a unique internal identifier and record its serial number in the current text content. For example, the first image uploaded by the user is Image 1, the second image is Image 2, and so on. The mapping relationship between these image identifiers (Identifier, ID) and serial numbers will be stored in the database.

[0031] When other users view the published text and image content, they can comment on the text and image content. The content details interface can include only the text and image content, or it can include the text and image content as well as comments. First, automatically identify the image identifiers in the content area of the content details interface (including the text content and comments in the text and image content). The preset image identifiers include, but are not limited to, Chinese words such as "图" (Figure), "P", "图片" (Picture), etc. It can also be extended to support other languages, such as English words like "Pic.", "Image", etc.

[0032] The recognition process of the above image identifiers can be based on preset image identifier matching, regular expressions, natural language processing (Natural Language Processing, NLP) techniques, or machine learning models.

[0033] Step 104: Parse each image in the content details interface to determine the semantic label corresponding to each image. The semantic label is used to characterize the content attribute of the image.

[0034] Specifically, use a deep learning image recognition model to parse each image in the content details interface to generate the semantic label corresponding to each image. The semantic label is used to characterize the content attribute of the image, such as "cat", "sunset", "food", etc.

[0035] Step 105: Match each image identifier with the semantic label corresponding to each image to determine the image corresponding to each image identifier.

[0036] Specifically, match each image identifier with the semantic label corresponding to each image to establish the corresponding relationship between each image identifier and the image. From this, it can be known which image each image identifier corresponds to. By matching the image identifier with the semantic label of the image, the accuracy of the correspondence between the image identifier and the image can be improved.

[0037] The above embodiments automatically identify image identifiers and associate them with images. When a user clicks on an image identifier, the corresponding image can be automatically and accurately located and displayed, eliminating the tedious step of manually swiping to find images and improving information acquisition efficiency and user satisfaction. This convenient interaction method makes the connection between text and images closer, encouraging users to read and explore more deeply, thus enhancing the overall readability and appeal of the content. Furthermore, users can manually associate specific text with images to adapt to the needs of different platforms and users.

[0038] In an optional specific embodiment, step 103 above, which involves recognizing image identifiers for the content area in the content details interface, includes at least one of the following: The first step: Determine the image identifiers in the content details interface using a fuzzy matching mechanism.

[0039] Specifically, the content of the content area on the content details page is parsed, and image identifiers are intelligently identified, such as " Figure X “PX”, “Image X”, etc., where X represents the image number or a specific identifier.

[0040] To improve the fault tolerance of user input, a fuzzy matching mechanism is introduced. For example, if the user inputs "see...", a fuzzy matching mechanism is introduced. Figure 7 "The image identifier can be identified and associated with image 7 through a fuzzy matching mechanism. For example: for " Figure 7-8 "This image identifier representing the range can be further optimized through a fuzzy matching mechanism to identify a continuous range of numbers and resolve it into Image 7 and Image 8."

[0041] The second step is to perform image keyword recognition on the content area of ​​the content details interface, determine the semantic tags of each image keyword based on the first text content associated with each image keyword, and determine the image identifier corresponding to each image keyword based on the semantic tags of each image keyword.

[0042] Specifically, when there is no explicit image number in the image keywords, the semantic information of the text description (i.e., the first text content) associated with the image keywords can be extracted and semantic tags can be generated. These semantic tags can then be used as image identifiers. For example, if the text content describes "details of the clothes in the picture" but does not specify an image number, "details of the clothes" can be used as a semantic tag and matched with the semantic tags of the uploaded image to locate the image corresponding to the image keyword.

[0043] The third step: Input the text content into the language model, and determine the image identifier corresponding to each image keyword by using the first text content associated with each image keyword in the text content.

[0044] Specifically, the text content is input into a language model, enabling it to recognize the image referencing intent within the text. For example, the language model identifies image keywords such as "as shown below," "as the photo shows," "refer to the attached image," "this photo," and "it," and obtains the first text content associated with the image keywords (i.e., the context of the image keywords). Based on the first text content associated with the image keywords and the image keywords themselves, an image identifier is determined. For example, if the preceding description " Figure 3 It's Zhang Wanxia. As the photo shows, it can be confirmed that the "photo" refers to... Figure 3 For example, if the preceding text describes, "I took three photos: the first is sunrise, the second is the beach, and the third is sunset. This photo (referring to the third one) is very beautiful," then it can be determined that "this photo" refers to the third image.

[0045] In an optional specific embodiment, after step 105 matches each image identifier with the semantic tag corresponding to each image to determine the image corresponding to each image identifier, the method further includes: Add prompts to each image icon, the prompts being used to indicate that the image icon is in an interactive state; Wherein, the first input represents the input to the first image identifier for which a prompt label has been added.

[0046] Specifically, after determining the image corresponding to each image identifier, a prompt is added to each image identifier to transform it into an actionable image identifier. This prompt can be a text hyperlink, a highlighted area, a button, or other visual cues. For example: in " Figure X Add prompts to image icons such as “pic1”, “this image”, and “details of this garment”, such as: a light background (e.g., transparent blue) with an underline, or highlighting, to indicate to the user that the above image icons are interactive (i.e., operable). For example: Figure 4 As shown, "Figure A", "Figure B", and "Figure C" are image identifiers. A light background color 21 is added to "Figure A, Figure B, and Figure C" within the content area for visual indication, and "Figure A", "Figure B", and "Figure C" are underlined 22 to indicate to the user that these three image identifiers are interactive and can be operated. For example: Figure 5 As shown, "image" is an image identifier. A light background color 23 is added to "the image above" in the content area to provide a prompt, and an underline 24 is added to "image" to indicate to the user that the above image identifier is interactive and can be operated.

[0047] In one optional embodiment, the first image identifier is located at a first position in the content area of ​​the content details interface; Step 102, in response to the first input, displays the first image corresponding to the first image identifier, including: In response to the first input, the user is redirected from the first location to the image area in the content details interface; The first image corresponding to the first image identifier is displayed in the image area.

[0048] Specifically, when the first image identifier is located in the first position of the content area in the content details interface, if the user's first input on the first image identifier in the first position is received, in response to the first input, the user first smoothly transitions from the first position of the currently located content area to the image area in the content details interface. Then, according to the correspondence between the image identifier and the image, the image displayed in the image area is smoothly scrolled to the first image corresponding to the first image identifier. This can automatically and accurately locate and display the corresponding image, thereby saving the user the tedious steps of manually swiping to find the image and avoiding sudden page jumps, providing a more comfortable visual transition.

[0049] The number of first images can be one or more.

[0050] If there is only one first image, it will be displayed in the image area of ​​the current content details screen. If the first image is displayed in the image area of ​​the current content details screen, the content displayed in the image area will remain unchanged. If other images are displayed in the image area of ​​the current content details screen, the page in the image area will automatically and smoothly scroll, switching the other images to the first image for display, to avoid sudden page jumps and provide a more comfortable visual transition.

[0051] If there are multiple first images, and other images are displayed in the image area of ​​the current content details interface, the page in the image area will automatically and smoothly scroll, switching the other images to one of the multiple first images for display. The displayed first image can be the first image listed first among the multiple first images, or any first image, which can be set as needed.

[0052] If there are multiple first images, and the first image listed first among them is selected for display, then if one of the first images is displayed in the image area of ​​the current content details interface, it is determined whether the first image displayed in the image area is the first image listed first. If it is, the content displayed in the image area remains unchanged; otherwise, the first image displayed in the image area is switched to be the first image listed first. Alternatively, if there are multiple first images, and one of the first images is displayed in the image area of ​​the current content details interface, the content displayed in the image area remains unchanged.

[0053] In an optional specific embodiment, the method further includes: Receive the second input; In response to the second input, the image region jumps to the first position.

[0054] Specifically, such as Figure 6 As shown, before displaying the first image 25, the user's first position of browsing the first image identifier is recorded. When the first image 25 is displayed, a return icon, such as the "cancel" icon 27, can be simultaneously displayed at the top or bottom of the image area 26 or in the top navigation bar of the current display interface. Since the currently displayed first image is image A, the image identifier "Image A" in the content area 28 of the current content details interface is bolded or displayed in another way to indicate to the user the image identifier corresponding to the currently displayed image.

[0055] If a second input from the user regarding the back icon is received, the system quickly retrieves the user's last browsing history from the user data stored in the backend, allowing the user to return to that position and improve the reading experience. This return mechanism can be implemented by recording the scroll position or text focus before the navigation.

[0056] In some embodiments of this application, the second input is used to trigger the return mechanism, and the second input can be a second operation. Exemplarily, the second input includes, but is not limited to: touch input or click input of the return icon by the user using a finger or stylus, or a voice command input by the user, or a specific gesture input by the user, or other feasible inputs. The specific input can be determined according to actual usage needs, and this embodiment of the invention does not impose limitations. For example, the second input can be: a click input of the return icon by the user.

[0057] The specific gesture in this application embodiment can be any one of the following: single-click gesture, swipe gesture, drag gesture, pressure recognition gesture, long-press gesture, area change gesture, double-press gesture, and double-tap gesture; In this embodiment, the click input can be a single click, a double click, or any number of clicks, or it can be a long press or a short press.

[0058] like Figure 7 As shown below, the process of the above-mentioned graphic and text interaction will be explained through a specific embodiment: Step 701: Determine the image identifier in the content details interface through a fuzzy matching mechanism; or, perform image keyword recognition on the content area of ​​the content details interface, determine the semantic label of each image keyword based on the first text content associated with each image keyword, and determine the image identifier corresponding to each image keyword based on the semantic label of each image keyword; or, input the text content into the language model, and determine the image identifier corresponding to each image keyword through the first text content associated with each image keyword in the text content.

[0059] Step 702: Perform image parsing on each image in the content details interface to determine the semantic tags corresponding to each image.

[0060] Step 703: Match each image identifier with the corresponding semantic tag of each image to determine the image corresponding to each image identifier.

[0061] Step 704: Receive a first input for the first image identifier in the content details interface, wherein the first image identifier is located at a first position in the content area of ​​the content details interface.

[0062] Step 705: In response to the first input, jump from the first position to the image area in the content details interface, and display the first image corresponding to the first image identifier in the image area.

[0063] Step 706: If a second input is received, then in response to the second input, jump from the image region to the first position.

[0064] In one optional embodiment, the first image identifier is located at a first position in the content area of ​​the content details interface; Step 102, in response to the first input, displays the first image corresponding to the first image identifier, including: In response to the first input, the content details interface is displayed in a split-screen display mode; The first split screen includes the image area in the content details interface, where the first image corresponding to the first image identifier is displayed; the second split screen includes the first position of the content area in the content details interface.

[0065] Specifically, when the first image identifier is located at a first position in the content area of ​​the content details interface, if a user's first input regarding the first image identifier at the first position is received, the content details interface is displayed according to a split-screen display model in response to the first input. This means the content area and image area of ​​the content details interface are displayed in a split-screen manner. The first split-screen is the image area of ​​the content details interface, displaying the first image corresponding to the first image identifier; the second split-screen is the content area of ​​the content details interface, displaying the first position where the first image identifier is located. This method avoids situations where, during scrolling, the content area displays too much content, preventing the display of images in the image area or allowing only a portion of the image area to be displayed.

[0066] In an optional specific embodiment, step 102, in response to the first input, displays the first image corresponding to the first image identifier, including: In response to the first input, a first thumbnail image corresponding to the first image identifier is displayed; Receive a third input to the first thumbnail image; In response to the third input, the first image is displayed.

[0067] Specifically, upon receiving the user's first input for a first image identifier, the system first determines the first image corresponding to the first image identifier based on the correspondence between image identifiers and images, and then displays a floating prompt box containing the first thumbnail image corresponding to the first image at the target location associated with the first image identifier in the current content details interface. For example: Figure 8 As shown, "Image" is an image identifier, and the corresponding first thumbnail image 32 is displayed at the target position corresponding to "Image".

[0068] If a third input from the user is received regarding the first thumbnail image, the system responds by enlarging the first thumbnail image to display the corresponding first image. Displaying images in this thumbnail format not only saves mobile data and bandwidth but also allows users to quickly preview the image visually, improving image preview speed.

[0069] In an optional specific embodiment, step 102, in response to the first input, displays the first image corresponding to the first image identifier, including: In response to the first input, the images corresponding to the first image identifier and at least one second image identifier are displayed. Wherein, the distance between each pair of the first image identifier and at least one second image identifier is less than a preset distance; or, the first image identifier and at least one second image identifier are described using a range qualifier.

[0070] Specifically, if a user's first input for a first image identifier is received, then in response to the first input, a first image corresponding to the first image identifier and a second image corresponding to at least one second image identifier associated with the first image identifier are displayed. Whether the first image identifier and the second image identifier are associated can be determined by whether the distance between the first image identifier and the second image identifier is less than a preset distance. If the distance between the first image identifier and the second image identifier is less than the preset distance, then the first image identifier and the second image identifier are associated, as shown in Figures A, B, and C. Alternatively, it can be determined by whether the first image identifier and the second image identifier are associated image identifiers described using range-limiting terms, as shown in Figures AC.

[0071] The specific process is as follows: First, based on the correspondence between image identifiers and images, determine the first image corresponding to the first image identifier, and determine the second image corresponding to each second image identifier. Then, display the first thumbnail image corresponding to the first image and at least one second thumbnail image corresponding to the second image identifier in the current content details interface.

[0072] For example:" Figure 7-8 "Images 7 and 8 are described using range qualifiers. Click " Figure 7-8 This can pop up a bottom drawer or overlay, such as an "Image Group Preview," which is a user interface (UI) component. Within this UI component, thumbnails of images 7 and 8 can be displayed side-by-side, allowing users to quickly browse the entire thumbnail group without leaving the current content area. For example, if the first image identifier is associated with multiple second image identifiers but not consecutively, such as... Figure 9 As shown, for “Figure A”, “Figure B”, and “Figure C”, a corresponding thumbnail image 29 can be displayed at the target position corresponding to “Figure A”, a corresponding thumbnail image 30 can be displayed at the target position corresponding to “Figure B”, and a corresponding thumbnail image 31 can be displayed at the target position corresponding to “Figure C”.

[0073] If a user's zoom-in input for the first thumbnail image is received, the system responds by enlarging the first thumbnail image, displaying the corresponding first image. Similarly, if a user's zoom-in input for the second thumbnail image is received, the system responds by enlarging the second thumbnail image, displaying the corresponding second image. This allows the user to view image details, reducing the effort required to find clickable areas and making the interaction more natural. For example: Figure 9 As shown, clicking on the thumbnail image 30 corresponding to "Figure B" will enlarge the thumbnail image 30, and the enlarged Figure B will appear as follows. Figure 10As shown, in Figure 10 The image above displays label 33 (as shown in Figure B) to inform the user of the currently displayed image, and also shows a "cancel" icon 34. For example: Figure 8 As shown, clicking on the thumbnail image 32 corresponding to the "Image" will enlarge the thumbnail image 32 for display. The enlarged image is as follows: Figure 11 As shown, it will also display a "cancel" icon 35.

[0074] In an optional specific embodiment, step 102, in response to the first input, displays the first image corresponding to the first image identifier, including: In response to the first input, the first image corresponding to the first image identifier is displayed, and the first image element in the first image is highlighted; the first image element is determined according to the content corresponding to the first image identifier in the content details interface.

[0075] Specifically, when displaying the first image, key image elements within it can be highlighted to emphasize the most important aspects. This can be achieved by applying background color changes, highlighting, magnification, or animation effects to the located first image element for a preset duration, clearly prompting the user. The preset duration can be set as needed, for example, between 0.5 and 1.5 seconds, attracting user attention without excessively disrupting reading. Furthermore, the key image element within the first image is determined based on the content corresponding to the first image identifier in the content details interface, and this element is used as the first image element to identify the content to be highlighted.

[0076] In summary, this embodiment of the application automatically identifies image identifiers and associates them with images. When a user clicks on an image identifier, the corresponding image can be automatically and accurately located and displayed, eliminating the tedious step of manually swiping to find images and improving information acquisition efficiency and user satisfaction. This convenient interaction method makes the connection between text and images closer, encouraging users to read and explore more deeply, thereby enhancing the overall readability and appeal of the content. Furthermore, the above solution requires minimal modification to existing application architectures, is easy to integrate and deploy, has relatively low technical implementation difficulty, and is easy to integrate and promote on existing social media platforms.

[0077] The image display method provided in this application can be executed by an image display device. This application uses an image display device executing the image display method as an example to illustrate the image display device provided in this application.

[0078] like Figure 12 As shown in the figure, this application embodiment also provides an image display device 1200, specifically including: Input module 1201 is used to receive a first input for the first image identifier in the content details interface; Display module 1202 is used to display the first image corresponding to the first image identifier in response to the first input.

[0079] Optionally, the first image identifier is located at a first position in the content area of ​​the content details interface; When the display module 1202 displays the first image corresponding to the first image identifier in response to the first input, it is specifically used for: In response to the first input, the user is redirected from the first location to the image area in the content details interface; The first image corresponding to the first image identifier is displayed in the image area.

[0080] Optionally, the input module 1201 is further configured to: Receive the second input; The display module 1202 is also configured to switch from the image area to the first position in response to the second input.

[0081] Optionally, the first image identifier is located at a first position in the content area of ​​the content details interface; When the display module 1202 displays the first image corresponding to the first image identifier in response to the first input, it is specifically used for: In response to the first input, the content details interface is displayed in a split-screen display mode; The first split screen includes the image area in the content details interface, where the first image corresponding to the first image identifier is displayed; the second split screen includes the first position of the content area in the content details interface.

[0082] Optionally, when the display module 1202 displays the first image corresponding to the first image identifier in response to the first input, it is specifically used for: In response to the first input, a first thumbnail image corresponding to the first image identifier is displayed; Receive a third input to the first thumbnail image; In response to the third input, the first image is displayed.

[0083] Optionally, when the display module 1202 displays the first image corresponding to the first image identifier in response to the first input, it is specifically used for: In response to the first input, the images corresponding to the first image identifier and at least one second image identifier are displayed. Wherein, the distance between each pair of the first image identifier and at least one second image identifier is less than a preset distance; or, the first image identifier and at least one second image identifier are described using a range qualifier.

[0084] Optionally, when the display module 1202 displays the first image corresponding to the first image identifier in response to the first input, it is specifically used for: In response to the first input, the first image corresponding to the first image identifier is displayed, and the first image element in the first image is highlighted; the first image element is determined according to the content corresponding to the first image identifier in the content details interface.

[0085] The image display device in this application embodiment can be an electronic device or a component within an electronic device, such as an integrated circuit or a chip. The electronic device can be a terminal or other devices besides a terminal. For example, the electronic device can be a mobile phone, tablet computer, laptop computer, PDA, in-vehicle electronic device, mobile internet device (MID), augmented reality (AR) / virtual reality (VR) device, robot, wearable device, ultra-mobile personal computer (UMPC), netbook, or personal digital assistant (PDA), etc. It can also be a server, network attached storage (NAS), personal computer (PC), television (TV), ATM, or self-service machine, etc. This application embodiment does not specifically limit the device.

[0086] The image display device in this application embodiment can be a device with an operating system. This operating system can be Android, iOS, or other possible operating systems; this application embodiment does not specifically limit the specific operating system.

[0087] The image display device provided in this application embodiment can achieve... Figures 1 to 11 The various processes implemented in the method implementation examples will not be described again here to avoid repetition.

[0088] Optionally, such as Figure 13As shown, this application embodiment also provides an electronic device 900, including a processor 901 and a memory 902. The memory 902 stores a program or instructions that can run on the processor 901. When the program or instructions are executed by the processor 901, they implement the various steps of the above-described image display method embodiment and can achieve the same technical effect. To avoid repetition, they will not be described again here.

[0089] It should be noted that the electronic devices in the embodiments of this application include the mobile electronic devices and non-mobile electronic devices described above.

[0090] Figure 14 A schematic diagram of the hardware structure of an electronic device to implement an embodiment of this application.

[0091] The electronic device 1000 includes, but is not limited to, components such as: radio frequency unit 1001, network module 1002, audio output unit 1003, input unit 1004, sensor 1005, display unit 1006, user input unit 1007, interface unit 1008, memory 1009, and processor 1010.

[0092] Those skilled in the art will understand that the electronic device 1000 may also include a power supply (such as a battery) for supplying power to various components. The power supply may be logically connected to the processor 1010 through a power management system, thereby enabling functions such as managing charging, discharging, and power consumption through the power management system. Figure 14 The electronic device structure shown does not constitute a limitation on the electronic device. The electronic device may include more or fewer components than shown, or combine certain components, or have different component arrangements, which will not be elaborated here.

[0093] The input unit 1004 is used to receive a first input to the first image identifier in the content details interface; The display unit 1006 is used to display the first image corresponding to the first image identifier in response to the first input.

[0094] Optionally, the first image identifier is located at a first position in the content area of ​​the content details interface; When the display unit 1006 displays the first image corresponding to the first image identifier in response to the first input, it is specifically used for: In response to the first input, the user is redirected from the first location to the image area in the content details interface; The first image corresponding to the first image identifier is displayed in the image area.

[0095] Optionally, the input unit 1004 is further configured to: Receive the second input; The display unit 1006 is also configured to, in response to the second input, jump from the image area to the first position.

[0096] Optionally, the first image identifier is located at a first position in the content area of ​​the content details interface; When the display unit 1006 displays the first image corresponding to the first image identifier in response to the first input, it is specifically used for: In response to the first input, the content details interface is displayed in a split-screen display mode; The first split screen includes the image area in the content details interface, where the first image corresponding to the first image identifier is displayed; the second split screen includes the first position of the content area in the content details interface.

[0097] Optionally, when the display unit 1006 displays the first image corresponding to the first image identifier in response to the first input, it is specifically used for: In response to the first input, a first thumbnail image corresponding to the first image identifier is displayed; Receive a third input to the first thumbnail image; In response to the third input, the first image is displayed.

[0098] Optionally, when the display unit 1006 displays the first image corresponding to the first image identifier in response to the first input, it is specifically used for: In response to the first input, the images corresponding to the first image identifier and at least one second image identifier are displayed. Wherein, the distance between each pair of the first image identifier and at least one second image identifier is less than a preset distance; or, the first image identifier and at least one second image identifier are described using a range qualifier.

[0099] Optionally, when the display unit 1006 displays the first image corresponding to the first image identifier in response to the first input, it is specifically used for: In response to the first input, the first image corresponding to the first image identifier is displayed, and the first image element in the first image is highlighted; the first image element is determined according to the content corresponding to the first image identifier in the content details interface.

[0100] It should be understood that, in this embodiment, the input unit 1004 may include a graphics processing unit (GPU) 10041 and a microphone 10042. The GPU 10041 processes image data of still images or videos obtained by an image capture device (such as a camera) in video capture mode or image capture mode. The display unit 1006 may include a display panel 10061, which may be configured in the form of a liquid crystal display, an organic light-emitting diode, etc. The user input unit 1007 includes at least one of a touch panel 10071 and other input devices 10072. The touch panel 10071 is also called a touch screen. The touch panel 10071 may include a touch detection device and a touch controller. Other input devices 10072 may include, but are not limited to, physical keyboards, function keys (such as volume control buttons, power buttons, etc.), trackballs, mice, joysticks, etc., which will not be described in detail here.

[0101] The memory 1009 can be used to store software programs and various data. The memory 1009 may primarily include a first storage area for storing programs or instructions and a second storage area for storing data. The first storage area may store the operating system, application programs or instructions required for at least one function (such as sound playback, image playback, etc.). Furthermore, the memory 1009 may include volatile memory or non-volatile memory, or both. The non-volatile memory may be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), or flash memory. Volatile memory can be random access memory (RAM), static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDRSDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM), and direct memory bus RAM (DRRAM). The memory 1009 in this embodiment includes, but is not limited to, these and any other suitable types of memory.

[0102] The processor 1010 may include one or more processing units; optionally, the processor 1010 integrates an application processor and a modem processor, wherein the application processor mainly handles operations involving the operating system, user interface, and applications, and the modem processor mainly handles wireless communication signals, such as a baseband processor. It is understood that the aforementioned modem processor may also not be integrated into the processor 1010.

[0103] This application also provides a readable storage medium storing a program or instructions. When the program or instructions are executed by a processor, they implement the various processes of the above-described image display method embodiments and achieve the same technical effect. To avoid repetition, they will not be described again here.

[0104] The processor is the processor in the electronic device described in the above embodiments. The readable storage medium includes computer-readable storage media, such as computer read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk.

[0105] This application embodiment also provides a chip, which includes a processor and a communication interface. The communication interface is coupled to the processor. The processor is used to run programs or instructions to implement the various processes of the above-described image display method embodiments and can achieve the same technical effect. To avoid repetition, it will not be described again here.

[0106] It should be understood that the chip mentioned in the embodiments of this application may also be referred to as a system-on-a-chip, system chip, chip system, or system-on-a-chip, etc.

[0107] This application provides a computer program product, which is stored in a storage medium and executed by at least one processor to implement the various processes of the above-described image display method embodiments, and can achieve the same technical effect. To avoid repetition, it will not be described again here.

[0108] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element. Furthermore, it should be noted that the scope of the methods and apparatuses in the embodiments of this application is not limited to performing functions in the order shown or discussed, but may also include performing functions substantially simultaneously or in the reverse order, depending on the functions involved. For example, the described methods may be performed in a different order than described, and various steps may be added, omitted, or combined. Additionally, features described with reference to certain examples may be combined in other examples.

[0109] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a computer software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0110] The embodiments of this application have been described above with reference to the accompanying drawings. However, this application is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of this application without departing from the spirit and scope of the claims, and all of these forms are within the protection scope of this application.

Claims

1. An image display method, characterized in that, include: Receive the first input for the first image identifier in the content details interface; In response to the first input, the first image corresponding to the first image identifier is displayed.

2. The method according to claim 1, characterized in that, The first image identifier is located at the first position in the content area of ​​the content details interface; The step of displaying the first image corresponding to the first image identifier in response to the first input includes: In response to the first input, the user is redirected from the first location to the image area in the content details interface; The first image corresponding to the first image identifier is displayed in the image area.

3. The method according to claim 2, characterized in that, The method further includes: Receive the second input; In response to the second input, the image region jumps to the first position.

4. The method according to claim 1, characterized in that, The first image identifier is located at the first position in the content area of ​​the content details interface; The step of displaying the first image corresponding to the first image identifier in response to the first input includes: In response to the first input, the content details interface is displayed in a split-screen display mode; The first split screen includes the image area in the content details interface, where the first image corresponding to the first image identifier is displayed; the second split screen includes the first position of the content area in the content details interface.

5. The method according to claim 1, characterized in that, The step of displaying the first image corresponding to the first image identifier in response to the first input includes: In response to the first input, a first thumbnail image corresponding to the first image identifier is displayed; Receive a third input to the first thumbnail image; In response to the third input, the first image is displayed.

6. The method according to claim 1, characterized in that, The step of displaying the first image corresponding to the first image identifier in response to the first input includes: In response to the first input, the images corresponding to the first image identifier and at least one second image identifier are displayed. Wherein, the distance between each pair of the first image identifier and at least one second image identifier is less than a preset distance; or, the first image identifier and at least one second image identifier are described using a range qualifier.

7. The method according to claim 1, characterized in that, The step of displaying the first image corresponding to the first image identifier in response to the first input includes: In response to the first input, the first image corresponding to the first image identifier is displayed, and the first image element in the first image is highlighted; the first image element is determined according to the content corresponding to the first image identifier in the content details interface.

8. An image display device, characterized in that, include: The input module is used to receive the first input for the first image identifier in the content details interface; The display module is used to display the first image corresponding to the first image identifier in response to the first input.

9. An electronic device, characterized in that, The electronic device includes a processor and a memory, the memory storing a program or instructions that run on the processor, the program or instructions which, when executed by the processor, implement the steps of the method as described in any one of claims 1 to 7.

10. A readable storage medium, characterized in that, The readable storage medium stores a program or instructions that, when executed by a processor, implement the steps of the method as described in any one of claims 1 to 7.

Images