Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt
  • Unsolved
Collapse
qtws26_logo

The Qt Event of the Year: Qt World Summit 2026

Save Your Spot >
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Image source property change from javascript
Qt 6.12 LTS is out! See what's new in the release blog

Image source property change from javascript

Scheduled Pinned Locked Moved QML and Qt Quick
7 Posts 2 Posters 6.7k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ? Offline
    ? Offline
    A Former User
    wrote on last edited by
    #1

    Hi, I didnt find anything what is useful especially for this question.

    I have an Image in a qml, and I have an other qml with a javascript code. How can I access the Image in an other qml and change its properties from javascript if a condition will be true?

    Have you any suggestion in this?
    Thank you!

    1 Reply Last reply
    0
    • A Offline
      A Offline
      andre
      wrote on last edited by
      #2

      Reference the id, and set the new source. Or, better yet, make the source URL a property of in your other QML file, and bind the source property of the image to that property.

      1 Reply Last reply
      0
      • ? Offline
        ? Offline
        A Former User
        wrote on last edited by
        #3

        I am new to Qt and cant imagine sure what Ive to do.
        Could you write an example please?

        1 Reply Last reply
        0
        • ? Offline
          ? Offline
          A Former User
          wrote on last edited by
          #4

          For the example off course I think only that few essential rows which is needed for me in this problem.

          1 Reply Last reply
          0
          • A Offline
            A Offline
            andre
            wrote on last edited by
            #5

            Something along these lines:

            Other.qml:
            @
            Item {
            id: myOtherComponent;
            property string imageSource;

            // your javascript will modify the imageSource property when appropriate
            }
            @

            main.qml:
            @
            Item {
            Other {
            id: myMagicJavaScriptStuff;
            }

            Image {
            id: theImage;
            source: myMagicJavaScriptStuff.imageSource;
            }
            }
            @

            Something along those lines would work...

            1 Reply Last reply
            0
            • ? Offline
              ? Offline
              A Former User
              wrote on last edited by
              #6

              Thank you! I'll test it as soon as I can!

              1 Reply Last reply
              0
              • ? Offline
                ? Offline
                A Former User
                wrote on last edited by
                #7

                The above code didnt work for me. But I had an idea and made a cute code. Please take a look to the following part of qml:
                @
                Image {
                source: getOutImgSource()

                function getOutImgSource() {
                if (loggedIn) return "images/menu-08Loged.png";
                else return "images/menu-08.png";
                }
                }
                @

                But it doesnt work to! It looks like the qmlviewer doesnt refresh the graphics. Is it possible?

                Have you any idea?

                Edit: please use @ tags around code sections to format them; Andre

                1 Reply Last reply
                0

                • Login

                • Login or register to search.
                • First post
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt
                • Unsolved