how to get image thumbnail from sharepoint online list?

Question

I am developing an spfx webpart on SharePoint online. it will request data from a list that has an image column. however the end-user usually uploads big images, this will cause my webpart bad performance. is there a way to get a smaller image? my sp site is a communication site.

Thanks

Answer 1

We can use the endpoint "thumbnailRenderer - spItemUrl", which can be fetched by graph api, to access thumbnails.
The following community video gives us some insights about this endpoint.
The related explanation is from 19:09.

https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/microsoft-365-developer-community-call-recording-8th-of-july/ba-p/2481287

Answer 2

Hi @kong ,
You can create a image column and the type of this column is 'Hyperlink or Picture' , then ,make the Format URL as 'picture' , you will get image thumbnail.

Here is an example of creating a column and adding a list item using JSOM：

function CreateListColumn() {  
    var clientContext = new SP.ClientContext();  
    var olistCollection = clientContext.get_web().get_lists();  
    var oList = olistCollection.getByTitle("ListName");  
    var oFields = oList.get_fields();  
      
    // Type - Image  
    var imageField = oFields.addFieldAsXml('<Field Type="URL" DisplayName="ImageColumn" Name="Image Column" Required="False" Format="Image"></Field>', true, SP.AddFieldOptions.addToDefaultContentType);  
    imageField.set_description("Image field");  
    imageField.update();  
   
    clientContext.executeQueryAsync(onsuccess, onfailed);  
}  
   
function onsuccess() {  
    console.log('Success');  
}  
   
function onfailed(sender, args) {  
    console.log('Failed' + args.get_message() + '\n' + args.get_stackTrace());  
}  


function CreateListItem() {  
    var clientContext = new SP.ClientContext();  
    var oWeb = clientContext.get_web();  
    var oList = oWeb.get_lists().getByTitle("ListName");  
    var camlQuery = new SP.CamlQuery();  
    var oListItemCreationInformation = new SP.ListItemCreationInformation();  
    var oListItem = oList.addItem(oListItemCreationInformation);  
    oListItem.set_item('Title', 'New item value');  
    oListItem.set_item('ImageColumn', 'https://xxxxx');  
    oListItem.update();  
    clientContext.load(oListItem);  
   
    // Execute the query to the server.  
    clientContext.executeQueryAsync(onsuccess, onfailed);  
}  
   
function onsuccess() {  
    console.log("Success");  
}  
   
function onfailed(sender, args) {  
    console.log('Failed' + args.get_message() + '\n' + args.get_stackTrace());  
}  

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---