How to get URL from Image

0
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%;" }}/> ); }  
asked
2 answers
0

image.png

You can follow the instructions from below link.

https://medium.com/mendix/building-a-pluggable-widget-url-image-viewer-6fd423858137

answered
0

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)

 

Voorbeeld.png

 

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"];
    }

 

 

 

answered