Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

using resources system with qml



  • I'm developing an app and in need of using images for the user interface, I have them all in the resources.qrc and they look like this:

    <RCC>
        <qresource prefix="/imgs">
            <file>assets/background.svg</file>
            <file>assets/background_1.svg</file>
            <file>assets/LOGO.png</file>
            <file>assets/Logo.svg</file>
        </qresource>
    </RCC>
    

    How do I use them?

    I tried both:

    //First trial:
    Image{
                source: "qrc:///imgs/assets/LOGO.png"
    }
    //Second Trial
    Image{
                source: "qrc:/imgs/assets/LOGO.png"
    }
    

    but nothing worked, am I missing something?

    Thanx



  • Could we see the full qml file, I think it's because you didn't put an anchors or a Layout to your images so they don't know where to be displayed or it can be cause your path is wrong, mine is like this :

     "qrc:/Ressources/Images/devices.png"
    


  • @darta
    Full code:

    Image{
                source: "qrc:/imgs/assets/LOGO.png"
                width: 500
                height: 500
                anchors.centerIn: parent
    }
    

    I didn't mention them because I didn't think they are relevant.



  • Yes of course but we never know,

    Sorry try that line:

        <qresource prefix="/imgs/">
    

    unstead of:

    <qresource prefix="/imgs">
    


  • @darta
    tried it but the image is still not showing



  • mine is more like this :

    <RCC>
        <qresource prefix="/">
            <file>imgs/assets/background.svg</file>
            <file>imgs/assets/background_1.svg</file>
            <file>imgs/assets/LOGO.png</file>
            <file>imgs/assets/Logo.svg</file>
        </qresource>
    </RCC>
    maybe try that and your files should be at the roots of the project not inside release or debug
    


  • Define resource import in your main QML file:

    import "qrc:/res"
    

    And then specify the same path as a source:

    source: "/res/image.png"
    

    My res file:

    <RCC>
        <qresource prefix="/">
            <file>res/image.png</file>
        </qresource>
    </RCC>
    

    In my case, the image is located inside res folder in / prefix.



  • Hi @newbisoso ,

    See this, it may help you