1

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
  • You can parse Id from string and build image ulr in format "/-/media/1551EAFFE6525213BB935CB00B4EBC26.ashx" – x3mxray Sep 8 at 15:24
  • Nice solution @x3mxray thanks. I'm almost ready with your suggestion but I'm missing a thing : how to get the server URL if I'm working in jss connected mode ? – Christophe Sep 9 at 6:46
2

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)
  • This solution is somehow the solution proposed by @x3mxray . As I said this is working except if I'm working in jss start:connected mode. Then the URL is not correct as it is a local url instead of the one of the remote server. But as this is a solution I'll accept it as the good one. – Christophe Sep 13 at 6:34
1

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:

  • I'm sorry but this is not an answer, the solution you give works for a field and not for params. I already stated that it works for a field in my question. The problem is that I'm getting a string, not an object from the params, so I can't pass a string to the Image tag: it just does nothing. – Christophe Aug 12 at 5:55

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.