title: QML: in loading images dynamically
body: <p>I am trying to load different images dynamically based on a button press.</p>
  
  <pre><code>Rectangle {
      id: rect
      width: 800
      height: 600
      color: "black"
      x: 300
      y: 10
  
      MediaPlayer {
          id: mediaplayer
          source: "images/video10.avi"
           autoPlay: true
          onError: videoPage1.sendToPost(mediaplayer.errorString)
       }
  
      VideoOutput {
          id: videoOutput
          anchors.fill: parent
          source: mediaplayer
          fillMode: VideoOutput.Stretch
       }
  
      MouseArea {
          id: playArea
          anchors.fill: parent
           onPressed: {
              if(!mediaplayer.hasVideo){
                  console.log("No media");
              }
               pressX = mouse.x
              pressY = mouse.y
          }
  
          onReleased: {
              releaseX = mouse.x
              releaseY = mouse.y
              doSomething();
              roi_flag=0;
          }
      }
  }
  
  Component {
      id: highlightComponent;
      Rectangle {
          color: "transparent";
          border.color: "black"
          border.width: 2
          property alias text:t1.text;
          property alias ss: image.source;
  
          Text {
              id: t1
              text: "click"
              anchors.centerIn: parent
              width: 5
          }
  
          Image {
              id:image
              //  width: 130; height: 100
              //  source: (direction_flag ? "images/top.png" : "images/right.png")
              source : ss
              anchors.centerIn: parent
          }
  
  
      }
  
  }
  
  
  function doSomething(){
       console.log(rOI);
  
           count++;
          var obj = 'highlightItem' + count;
          var dir;
          if(direction_flag == 0){
              if((pressX - releaseX) &gt; 0){
                   dir= "images/left.png";
              }else if((pressX - releaseX) &lt; 0){
                   dir="images/right.png";
              }
          }else{
              if((pressY - releaseY) &gt; 0){
                   dir="images/top.png";
              }else if((pressY - releaseY) &lt; 0){
                   dir="images/down.png";
              }
          }
  
          highlightComponent.incubateObject (rect, {
                                                 "x" : pressX,"y":pressY,width:releaseX - pressX,height: releaseY - pressY,text:count,ss:dir});
   }
  </code></pre>
  
  <p>The method works when changing the text but its not working when changing the image, I am getting the error "QML Image: Protocol "" is unknown".</p>
  
  <p>Any suggestions will be helpful, thanks.</p>