0

I am trying below TypeScript to retrieve the Image column using SPFx .Unfortunately image is not rendering on page.

Please help me on this.

4
  • i tried with <img src={item.Image["Url"]}/> but no luck
    – prasad
    Oct 1, 2019 at 22:48
  • Try, item.Image.Url Oct 1, 2019 at 23:02
  • have tried with item.Image.Url also but no luck
    – prasad
    Oct 2, 2019 at 0:11
  • Can you update the code you are using? Oct 2, 2019 at 15:59

1 Answer 1

1

Sample demo(many test secenarios, ignore others which you don't need):

import * as React from 'react';
import styles from './ReactSpFx.module.scss';
import { IReactSpFxProps } from './IReactSpFxProps';
import { escape } from '@microsoft/sp-lodash-subset';

import { SPHttpClient, SPHttpClientResponse} from '@microsoft/sp-http';

import Slider from "react-slick";
import "../../../../node_modules/slick-carousel/slick/slick.css"; 
import "../../../../node_modules/slick-carousel/slick/slick-theme.css";
import { any } from 'prop-types';

import { GraphFileBrowser } from '@microsoft/file-browser';

export interface IReactItem{ 
  ID:string,
  Title:string,
  Address:string
  Pic:{
    Description:string,
    Url:string
  }
}

export interface IReactGetItemsState{ 
  items:IReactItem[],
  selectValue:string
}

declare global {
  interface Window { _graphToken: any; }
}

export default class ReactSpFx extends React.Component<IReactSpFxProps,IReactGetItemsState> {

  public constructor(props: IReactSpFxProps) {
    super(props);
    window._graphToken =props.userToken;
    this.state = {
      items:[],
      selectValue:"Radish"
    };
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);    
  }

  public getAuthenticationToken():Promise<string> {    
    return new Promise(resolve => {
      resolve(
        window._graphToken
      );     
    });

  }

  public componentDidMount() {
    var reactHandler = this;
    this.props.context.spHttpClient.get(`${this.props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('TestList')/items?select=ID,Title,Address,Pic`,
    SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => {  
      response.json().then((responseJSON: any) => {            
        reactHandler.setState({
          items: responseJSON.value
        });
      });  
    });   
  }

  protected slider;
  next() {
    this.slider.slickNext();
  }
  previous() {
    this.slider.slickPrev();
  }

  handleChange = (event) => {
    this.setState({selectValue:event.target.value});
  };

  renderPic (item) {
    if (item.Pic === null) {
      return <img width={150} height={150}/> //use a default image better
    } else {
      return  <img width={150} height={150}  src={item.Pic.Url} />
    }
  }
  public render(): React.ReactElement<IReactSpFxProps> {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };

    alert(this.state.selectValue);

    return (
      <div className={styles.reactSpFx}>

        <div className={styles.container}>         

        {(this.state.items || []).map(item => (
            <div key={item.ID} className={styles.row}>{item.Title}            
            {this.renderPic(item)}           
            {/* <div dangerouslySetInnerHTML={{ __html: item.Address.replace(/[\n\r]/g,"<br/>")}}></div>  */}
          </div> 
          ))}                          
        </div>
        <GraphFileBrowser
        getAuthenticationToken={this.getAuthenticationToken}
        endpoint='https://graph.microsoft.com/v1.0/sites/xxx'
        onSuccess={(selectedKeys: any[]) => console.log(selectedKeys)}
        onCancel={(err: Error) => console.log(err.message)}
      />

        <select 
        value={this.state.selectValue} 
        onChange={this.handleChange}>
          <option value="Orange">Orange</option>
            <option value="Radish">Radish</option>
            <option value="Cherry">Cherry</option>
          </select>
        <div>
          <h2> Single Item</h2>
          <Slider ref={c => (this.slider = c)} {...settings}>
            <div>
              <h3>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
            <div>
              <h3>3</h3>
            </div>
            <div>
              <h3>4</h3>
            </div>
            <div>
              <h3>5</h3>
            </div>
            <div>
              <h3>6</h3>
            </div>
          </Slider>
          <br/>
          <br/>
          <div style={{ textAlign: "center" }}>
          <button className="button" onClick={this.previous}>
            Previous
          </button>
          <button className="button" onClick={this.next}>
            Next
          </button>
        </div>
        </div>
      </div>      
    );    
  }
}

enter image description here

2
  • Thank you so much You are master
    – prasad
    Oct 2, 2019 at 17:24
  • You could accept it as answer so it may help others.
    – Lee_MSFT
    Oct 3, 2019 at 0:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.