Get and show image in SPFx webpart from a Image column in a SP List

Question

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:

This is how my list looks like in SharePoint:

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

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.

Answer 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>
    );
}