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

CSS modifying the source location for images.



  • I have the following CSS for a QFrame:

    QFrame {background-color: #e9efef;
    	background-image: url("meshtile_4x4.png");
            border: 2px solid #cccccc;
      	border-top-left-radius: 8px;
            border-top-right-radius: 8px;
    	border-bottom-left-radius: 8px;
    	border-bottom-right-radius: 8px;}
    

    This CSS is specified in an XML file which my C++ application reads at startup. The problem is the application doesn't locate the image. I've added the following to my XML file:

        images="~/XMLMPAM/config/images/"
    

    The intention is that this attribute is read by the C++ application and used to resolve any image specified in the CSS. The question is how to I implement / modify any image path to include this?

    I could implement this when reading the XML file, just curious if there is a better way to implement this?



  • Thank you, I've since implemented a working solution.



  • @SPlatten

    You could add one or more qrc resource(s) for your images and then switch between them.

    https://doc.qt.io/qt-5/resources.html



  • Thank you, although thats really the exact opposite of why I'm doing this. My approach is to not put anything in the build or compiled application, I want to use the XML to give a dynamic approach to the resources so the C++ engine will remain unchanged and the look and feel of the application is supplied in the XML.



  • @SPlatten said in CSS modifying the source location for images.:

    I want to use the XML to give a dynamic approach to the resources

    So you want to load images or styles from theoretically everywhere, not only from your app / build directory?



  • Anywhere on the local file system.



  • If I got it right, you want to keep this images="~/XMLMPAM/config/images/" variable in your XML / CSS file to define a path for background-image: url("meshtile_4x4.png"); without changing anything in your application or at runtime?!

    I don't know if this is even possible, without parsing and re-writing the same CSS everything you change the path. But I wouldn't consider myself an expert when it comes to XML or CSS ;-)



  • The engine I referred to is the C++ which I'm modifying now to look at the CSS attribute and if it finds a URL(, it will then apply the images folder which it has translated into a full path.



  • I guess what your looking for is void QDir::setSearchPaths(const QString &prefix, const QStringList &searchPaths):

    Sets or replaces Qt's search paths for file names with the prefix prefix to searchPaths.
    To specify a prefix for a file name, prepend the prefix followed by a single colon (e.g., "images:undo.png", "xmldocs:books.xml"). prefix can only contain letters or numbers (e.g., it cannot contain a colon, nor a slash).

    I haven't used it myself so far. But it could help with your problem.



  • Thank you, I've since implemented a working solution.



  • @SPlatten said in CSS modifying the source location for images.:

    I could implement this when reading the XML file, just curious if there is a better way to implement this?

    That is how I would do it. Similarly, when I've needed to modify a QSS/CSS file for something which has to be dynamic beyond what QSS/CSS supports statically, I pre-process the stylesheet file before applying it to the application.


Log in to reply