Sharepoint SPFx ${} replace slash with space in render method

Question

I'm pretty new to spfx client side development model and there is some stuff that I don't understand.

In sharepoint webpart (SPFx) I'm trying to dynamically load an image src, but if I do: src="${item.ImageUrl}" the slashes (/) are replaced by spaces. But if I do it manually: src="https://picsum.photos/720/300/?image=0", the image is shown without problem.

Any help would be appreciated! Thanks!

can you try it as `` no double quotes and no `$` ? – Gautam Sheth Sep 20 '18 at 09:41 — Gautam Sheth, Sep 20 '18 at 09:41
That just render src={item.ImageUrl} in the html – user1385416 Sep 20 '18 at 12:05 — user1385416, Sep 20 '18 at 12:05

score 0 · Accepted Answer · answered Sep 20 '18 at 12:13

It was my mistake!

<img class="${styles.image} src="${item.ImageUrl}" alt="${escape(item.Title)}"  />

Its missing the " after the class styles, so for a strange reason the url makes that thing.

This teach me a valuable lesson. If something doesn't work just go home and try tomorrow :)

Sharepoint SPFx ${} replace slash with space in render method

1 Answers1