Image in rendering parameters to display background picture

Question

Here is what I'm trying to achieve :

• I have a component that has a parameter backgroundImage. This parameter was previously a field and I achieved what I wanted without any problem but in order to avoid saving an Item for my structure component I'd like to use a rendering parameter instead.
• I can get the params and see what I get for everything except my image. When I display what is in my backgroundImage parameter a string is returned containing this : <image mediaid="{1551EAFF-E652-5213-BB93-5CB00B4EBC26}" />
• Now what may I do with this string ? I use jss and sitecore 9.1.1

Answer 1

I got this working using the following:

<img src={"/habitathomejss/-/media/"+props.params.Image.slice(props.params.Image.indexOf("{")+1,props.params.Image.indexOf("}")).replace(/-/g,"")+".ashx?h=50&w=94"}></img>

You need to make sure of the following:

1. The image is inside /sitecore/media library/Project/TENANTNAME/SITENAME/data/media/img
2. If you're using virtual paths that the virtual path is added (in my example it was habitathomejss)

Answer 2

The <image mediaid="{1551EAFF-E652-5213-BB93-5CB00B4EBC26}" /> is the raw database value for the image from Sitecore. To able convert it to an img tag you need to use the correct field from the JS library. For example here is the React component:

import React from 'react';
import { Image } from '@sitecore-jss/sitecore-jss-react';

const StyleguideFieldUsageImage = (props) => (
  <Image media={props.fields.backgroundImage} />
);

Here are the example apps for different frameworks:

• Angular
• React
• Vue