How to get URL from Image

Hi,   I want to read an image-url from a custom widget.   However, whatever I try I still get an "undefined" whenever I try to read the property value.   The code I use is listed below. What am I missing in this? Why is the image-url always empty, eventhough it is filled in the component (see screenshot)   import { ReactElement, createElement } from "react"; import { WebImage } from "mendix"; export interface TestAppProps { ThumbsUp: WebImage; } export function TestApp({ThumbsUp}: TestAppProps): ReactElement { const ThumbsUpUri = ThumbsUp.uri; console.log(ThumbsUpUri); return ( <img className="mx-image mx-name-staticImage1 img-responsive" src={ThumbsUpUri} style={{ height:"100%" , width:"100%;" }}/> ); }  
2 answers


You can follow the instructions from below link.


Hi Arda,


I have seen that article, but that is not the solution I am building. 


I am adding a property type Image (see: Image Property Type ) to my project.  It exposes its properties through the WebImage-interface found here: WebImage interface


However, querying WebImage.Uri does not yield any results.


However, if I cast my image to a DynamicValue<ImageValue>  type, I get a list of all images that are part of the project (ThumbsUp, ThumbsDown & Exclamation)




I suspect that there is bug in that part of the interface. 


Solution now is Stringify & Parse the JSON to an JSON object and check if the URI's are filled for the images. Not very efficient, but for now a workaround that does the trick.  This is needed as the list is not recognized as a JSON object when created. 

 var list = JSON.parse(JSON.stringify(ThumbsUp));

    if (list["ThumbsUp"]) {
        ThumbsUpUri = list["ThumbsUp"]["value"]["uri"];

    if (list["ThumbsDown"]) {
        ThumbsDownUri = list["ThumbsDown"]["value"]["uri"];

    if (list["Exclamation"]) {
        ExclamationUri = list["Exclamation"]["value"]["uri"];