0

I am currently building a SPFx webpart with React that will get items from a SharePoint list via PnP Js but when I'm trying get the image from the list I get stuck.

Right now my SPFx webpart looks like this, I can show all other fields from my list except the image:

enter image description here

This is how my list looks like in SharePoint:

enter image description here

Here I show you the console in Google Chrome of all my list items with one example: enter image description here

One strange thing here is that the JSON elements for the ProductImage0 column is represented as a string instead of a JSON object, otherwise I could have easily access the Url that I can reference to in the Img tag later.

Here is the code that relates to my issue:

EmployeeStore.tsx:

import * as React from 'react';
import styles from './EmployeeStore.module.scss';
import { IEmployeeStoreProps } from './IEmployeeStoreProps';
import LoggedInUser from './UI/LoggedInUser/LoggedInUser';
import Products from '../components/UI/ProductStore/Products/Products';

export default class EmployeeStore extends React.Component<IEmployeeStoreProps, {}> {
  public render(): React.ReactElement<IEmployeeStoreProps> {
    return (
      <div className={ styles.employeeStore }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <LoggedInUser />
              <span className={ styles.title }>The Employee Store</span>
              <p className={ styles.subTitle }>The Store for all employees where you can order items you need to do your job</p>
              <Products  />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Products.tsx:

import * as React from 'react';
import styles from '../../../EmployeeStore.module.scss';
import { IEmployeeStoreProps } from '../../../IEmployeeStoreProps';
import { IProductsState } from './IProductsState';

import { graph } from '@pnp/graph';
import "@pnp/graph/users";
import { sp } from '@pnp/sp';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

export default class Products extends React.Component<{}, IProductsState> {
    /**
     *Constructor and states
     */
    constructor(props: IProductsState) {
        super(props);
        this.state = {
            items: []
        }
    }

    public componentDidMount(){
        console.log("Products did mount");
        this.getStoreItems();
    }

    public async getStoreItems(){
        const storeItems: any[] = await sp.web.lists.getByTitle("Store").items.get();
        console.log(storeItems);
        this.setState({items: storeItems});
        console.log(this.state.items);  
    }

    public render(): React.ReactElement<IEmployeeStoreProps>{
        return(
            <div>
                {this.state.items.map(function(item: any){
                    console.log(item.ProductImage0);
                    return(
                        <div>
                            <img src={item.ProductImage0["serverUrl"]+["serverRelativeUrl"]}></img>
                            <h1 className={styles.subTitle}>{item.Brand0}  {item.Model0}</h1>
                            <p className={styles.subTitle}>{item.Price0}</p>
                            <p className={styles.subTitle}>{item.ProductCategory}</p>

                        </div>
                    );
                }.bind(this))}
            </div>
        );
    }
}

IProductsState.ts:

export interface IProductsState {
    items: IProductList[];
}

export interface IProductLists{
    value: IProductList[];
}

export interface IProductList{
    ItemID0: number;
    Brand0: string;
    Model0: string;
    Price0: number;
    ProductCategory: string;
    ProductImage0: Object; //I have tried with String here as well  but it did not work
}

I have also tried item.ProductImage0.Url but it displays Undefined in the Console.

I would really appreciate if someone could help me with this issue so that I can show some images from my list in my SPFx webpart.

Thank you in advance.

1

Since you have already noticed that

the JSON elements for the ProductImage0 column is represented as a string instead of a JSON object, otherwise I could have easily access the Url that I can reference to in the Img tag later.

could you not try something like:

public render(): React.ReactElement<IEmployeeStoreProps>{
    return(
        <div>
            {this.state.items.map(function(item: any){
                console.log(item.ProductImage0);
                const imageJSON = JSON.parse(item.ProductImage0);
                return(
                    <div>
                        <img src={imageJSON.serverRelativeUrl}></img>
                        <h1 className={styles.subTitle}>{item.Brand0}  {item.Model0}</h1>
                        <p className={styles.subTitle}>{item.Price0}</p>
                        <p className={styles.subTitle}>{item.ProductCategory}</p>

                    </div>
                );
            }.bind(this))}
        </div>
    );
}
1
  • Dylan Cristy, thanks alot for your help. It really worked :)
    – kelank
    Nov 10 '20 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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