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
Improve this question
2
  • 1
    You can parse Id from string and build image ulr in format "/-/media/1551EAFFE6525213BB935CB00B4EBC26.ashx"
    – x3mxray
    Commented Sep 8, 2019 at 15:24
  • 1
    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
    Commented Sep 9, 2019 at 6:46

2 Answers 2

Reset to default
3

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)
Improve this answer
1
  • 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
    Commented Sep 13, 2019 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:

Improve this answer
1
  • 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
    Commented Aug 12, 2019 at 5:55

Your Answer

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

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