Skip to Content
avatar image
Former Member

SDK and Images

Hi,

I have a couple of questions about images:

  1. I have an image in the res folder, but when I refer to it in code SRC = "res/image.png", it shows as a broken link. When I test it in Chrome and use Google tools, it shows that it is looking for the image in the images folder.
  2. When we use the image component, we are able to upload an image using a dialog. How can I use this dialog to upload images to my control at runtime?

Thanks.

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

1 Answer

  • Best Answer
    Dec 30, 2014 at 03:38 AM

    Hi Robert,

    You may find the following posts relevant to your questions:

    1) SDK Tips and Tricks: Resources and Images by Reiner Hille-Doering for how to reference embedded images in SDK Components;

    2) Design Studio SDK 1.2 - An Image Component Free of MIME Repository Worries by Mike Howles for a technique to upload images to an SDK Component. By "uploading images at run-time" I assume you actually meant at design-time.

    Regards,

    Mustafa.

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      I fixed it using the an image element and inline encoding:

      (The image element is easier to control)

      div.imgConUA{

      float: left;

      display: inline-block;

      }

      div.imgConA{

      float: left;

      display: inline-block;

      }

      var imgAString = 'iVBORw0KGgoAAAANSUhEUgAA...';

      var imgUAString = 'iVBORw0KGgoAAAANSUhEUgAAA...';

      this.afterUpdate = function() {

      $(".imgCon").remove();

      if(numcols_val != 0){

      $(".imgConA").remove();

      $(".imgConUA").remove();

      divWidth = Math.round(that.$().width()/numcols_val);

      divHeight = Math.round(that.$().height()/numrows_val)-2;

      for(i=1; i<=numrows_val; i++){

      for(j=1; j<=numcols_val; j++){

      varTemp = (((i-1)*numcols_val)+j);

      if(varTemp & 1){

      srcAStr = "<img width='" + divWidth + "' height='" + divHeight + "' title='' alt='' src='data:image/png;base64," + imgAString + "'>";

      this.$().append('<div class="imgCon imgConA">' + srcAStr + '</Div>' );

      }

      else{

      srcUAStr = "<img width='" + divWidth + "' height='" + divHeight + "' title='' alt='' src='data:image/png;base64," + imgUAString + "'>";

      this.$().append('<div class="imgCon imgConA">' + srcUAStr + '</Div>' );

      }

      }

      }

      }

      };