Servoy Forum

I'm using Servoy Version: 8.4.0.3402 on Windows 10.

When I put a Label on a form and then set its imageMedia property to an SVG file the SVG image is displayed on the form in development mode. But when I run the NG client I can see the label but the SVG image does not appear. Does not matter which browser I use.

Is this a bug in Servoy? Should the SVG image be visible in the browser?

I can import Servoy Extra Components which has an imageLabel component and that component works in both development mode and when launched in a browser. But, as far as I can see, I am unable to create imageLabels using the Solution Model and that is required for what I am doing.

thanks,

Terry

Hi Terry,

What do you see when you use the inspector in the browser?
Is the link to the svg file still there when you use a label?

[EDIT] b.t.w. you can use webcomponents through solutionModel.

Here is what I find in Chrome for the label with the SVG file. Note the file's name is "blue_circle_arrow__no_XML.svg".
The no XML part means that I removed the <XML> element declaration from the start of the SVG file. That was required by the Image Label component but I checked and see that it does not work no matter if the XML declaration is there for standard Servoy labels but it works fine for the Image Label component.

Here is what I see in Chrome for the label with the SVG image:

Code: Select all

<data-servoydefault-label name="svy_1073742203" svy-model="model.svy_1073742203" svy-api="api.svy_1073742203" svy-handlers="handlers.svy_1073742203" svy-servoyapi="handlers.svy_1073742203.svy_servoyApi" class="ng-isolate-scope"><div style="width: 100%; height: 100%; overflow: hidden; position: absolute; border-color: rgb(0, 0, 0); border-width: 1px; border-style: solid; cursor: default; line-height: 100%;" class="svy-label ng-scope" id="d2465732697269979a621dfbe91c9e95" sablo-tabseq="(handlers.onActionMethodID || handlers.onDoubleClickMethodID || handlers.onRightClickMethodID) ? model.tabSeq : -2" svy-click="handlers.onActionMethodID($event)" svy-dblclick="handlers.onDoubleClickMethodID($event)" svy-rightclick="handlers.onRightClickMethodID($event)" tabindex="-1">     
  <div style="width: 100%; overflow: hidden; position: relative; top: 50%; transform: translateY(-50%);" class="svy-nowrap">
            <span svy-imagemediaid="{img: model.dataProviderID.url ? model.dataProviderID.url : model.imageMediaID, componentSize: model.size, rollOverImg:model.rolloverImageMediaID, visible: model.visible, updateParentSize: !hasText()}" style="background-image: url(&quot;resources/fs/test/blue_circle_arrow__no_XML.svg?imageWidth=0&amp;imageHeight=0&quot;); background-repeat: no-repeat; background-position: left center; display: inline-block; vertical-align: middle; background-size: contain;"></span>
            <span ng-bind-html="(((model.dataProviderID == null &amp;&amp; !model.hideText) || model.dataProviderID.url) ? model.text : model.dataProviderID) | formatFilter:model.format.display:model.format.type | mnemonicletterFilter:model.mnemonic | trustAsHtml:servoyApi.trustAsHtml()" class="ng-binding"></span>
  </div>
</div>
</data-servoydefault-label>


So it looks to me that its there.

Also, the SVG image sometimes can be seen in the screen builder, sometimes not for Servoy labels but is always visible when the Image Label is used.

Following up on your comment can you point me to somewhere in the Servoy Wiki where I can see how to use the Solution Model to generate components?

thanks,

Terry