Images and Azure AI Search

Question

Hey, I have uploaded my images in the .jpeg format in a storage account in the azure portal. The network setting is set to all networks for the storage account. Next, I used the azure ai search service and indexed the images as well, used the OCR skills. Now I am using this index in an application to query. So, when I am querying info related to the images it is able to get the information related to it but when I am asking it to get the image it gives me a link to it, which is of the storage account, and it is restricted. Or it will give an image of the image icon. How can I access the image. Because sometimes it is giving me the images as attached in the example. I need to see image also.

Answer 1

The issue you're facing is related to how the Azure Storage Account handles access permissions and how your application is configured to retrieve the images. Here’s how you can fix this and ensure the images are displayed correctly:

Steps to Resolve the Issue:

Set the Storage Blob Access Level:

Go to your Azure Storage Account in the Azure Portal.

  Navigate to the **Containers** section under **Data Storage**.
  
     Select the container where your images are stored.
     
        Click on the **Change Access Level** option at the top.
        
           Set the container access level to **Blob (anonymous read access for blobs only)** or **Container (anonymous read access for the container and its blobs)**, depending on your needs.
           
           > Note: Be cautious with public access if your images contain sensitive data.
           
           **Generate SAS Tokens for Restricted Access:** If you don’t want to make the blobs publicly accessible, use a **Shared Access Signature (SAS)** to provide secure access:
           
              - Go to the Storage Account and select **Shared Access Signature**.
              
                 - Configure the permissions (e.g., Read, List) and expiry date/time.
                 
                    - Generate the SAS token.
                    
                       - Append the generated SAS token to your blob URLs when displaying images in your application.
                       
                       **Enable Image Retrieval in Your Application:**
                       
                          - Ensure your application is using the proper blob URLs (either with SAS tokens or public access) to retrieve and display the images.
                          
                             - If you’re using Azure Cognitive Search, ensure the **output field mappings** in your skillset include the `content` URL of the images.
                             
                             **Verify the Indexer Configuration:**
                             
                                - Open the Azure Cognitive Search service and navigate to your **Indexer**.
                                
                                   - Check the skillset configuration for the **OCR skill** to ensure it outputs the correct blob URL.
                                   
                                      - Ensure that the index schema includes a field for storing and retrieving the image URL.
                                      
                                      **Update Your Application Code:** Modify your application to handle the image URLs correctly:
                                      
                                         - If you're displaying the image in a web application, use an `<img>` HTML tag with the blob URL as the source.
                                         
                                            - If you're accessing the image in other applications, ensure the code uses the correct URL format.
                                            

Example Configuration:

Public Access Blob URL:

<img src="https://<storage-account-name>.blob.core.windows.net/<container-name>/<image-name>.jpeg" alt="Image" />

Blob URL with SAS Token:

<img src="https://<storage-account-name>.blob.core.windows.net/<container-name>/<image-name>.jpeg?<sas-token>" alt="Image" />

By following these steps, you should be able to retrieve and display the images properly in your application. Comment by shan