How to retrieve image from a SharePoint Online Document Library using SPFx using filters

Question

public render(): React.ReactElement<IFlowDiagramProps> {
     // const docRelativeUrl :string = event.selectedRows[0].getValueByName('FileRef');

           var str="";
           var usemaps="";
         this.state.items.map(function(item,key)
         {
           str=item.Maps;
           usemaps=item.UseMap;
         })  
         //var str1='<img src="https://xyz.sharepoint.com/sites/sitename/DiagramLib/ManageProjectPortfolio.png" useMap="#98B3B49952805CFD">'+str+'</img>';

         var requestUri = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getByTitle('DiagramLib')/items?$select=Name&$filter=HexID eq 27DB2B7156297051";
         var str1='<img src="'+requestUri+' useMap='+usemaps+'>'+str+'</img>';
         return (
              <div className={styles.pivotbackgroud} >
                <div className={styles.processheading}>Process Overview</div>
                <Pivot aria-label="Large Link Size Pivot Example" linkSize={PivotLinkSize.normal}>
                  <PivotItem headerText="Flow">            
                    <div id="image_map" dangerouslySetInnerHTML={{__html: str1}}>
                    </div>                     
                  </PivotItem>

                  <PivotItem headerText="Description">
                    <Label>Pivot #3</Label>
                  </PivotItem>
                </Pivot>
              </div>
            );

  }

How to fetch diagram in this line I have consider requesturi :

var requestUri = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getByTitle('DiagramLib')/items?$select=Name&$filter=HexID eq 27DB2B7156297051";

var str1='<img src="'+requestUri+' useMap='+usemaps+'>'+str+'</img>';

Answer 1

You will have to do a request to access the API.

The out of the box method would be to use the SPHttpClient that is part of the web part context, documentation on that here: https://docs.microsoft.com/en-us/javascript/api/sp-http/sphttpclient

Your code would look something like this:

//add to imports: import {SPHttpClient, SPHttpClientResponse} from '@microsoft/sp-http';

let imagename = "";

let url = "/_api/web/lists/getByTitle('DiagramLib')/items"+
  "?$select=FileLeafRef"+
  "&$filter=HexID eq '27DB2B7156297051'";

this.context.spHttpClient.get(url, SPHttpClient.configurations.v1)
  .then((result:SPHttpClientResponse) => {
      result.json().then((jsonresult) => {
          imagename = jsonresult.value[0].FileLeafRef;
  });