60

I want to display .jpg image in an Qt UI. I checked it online and found https://doc.qt.io/archives/qt-4.8/qt-widgets-imageviewer-example.html. I thought Graphics View will do the same, and also it has codec to display video. How to display images using Graphics View? I went through the libraries, but because I am a totally newbie in Qt, I can't find a clue to start with. Can you direct me to some resources/examples on how to load and display images in Qt?

Thanks.

li ki
  • 342
  • 3
  • 11
Lily
  • 5,872
  • 19
  • 56
  • 75

7 Answers7

57

You could attach the image (as a pixmap) to a label then add that to your layout...

...

QPixmap image("blah.jpg");

QLabel *imageLabel = new QLabel();
imageLabel->setPixmap(image);

mainLayout.addWidget(imageLabel);

...

Apologies, this is using Jambi (Qt for Java) so the syntax is different, but the theory is the same.

Ali
  • 21,572
  • 15
  • 83
  • 95
Ben L
  • 6,618
  • 8
  • 39
  • 34
45
#include ...

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QGraphicsScene scene;
    QGraphicsView view(&scene);
    QGraphicsPixmapItem item(QPixmap("c:\\test.png"));
    scene.addItem(&item);
    view.show();
    return a.exec();
}

This should work. :) List of supported formats can be found here

li ki
  • 342
  • 3
  • 11
Wojciech Bederski
  • 3,852
  • 1
  • 25
  • 28
  • 33
    how can we use this with UI created in QT Creator? – DucDigital Feb 10 '10 at 09:54
  • 4
    Please note that for Qt 4.6 this code has an error. Try this one: int main(int argc, char *argv[]) { QString fileName("C:/aaa..gif"); QApplication a(argc, argv); QGraphicsScene scene; scene.addPixmap(QPixmap(fileName)); QGraphicsView view(&scene); view.show(); return a.exec(); } – Narek Jun 11 '10 at 10:49
  • 1
    How can you add a GraphicsView to a layout object? – Animal Rights Dec 20 '11 at 19:42
  • 3
    To use in Creator, add the image to a Resources File. Create a QLabel (yes, it is text by default) then select the Pixmap property. It will allow you to choose the picture to display. – Walter Nissen Jun 14 '15 at 22:05
  • 2
    Does this solution have any advantages over using a QLabel, i.e. performance, or something else? – ArchLinuxTux Feb 09 '18 at 09:08
14

If the only thing you want to do is drop in an image onto a widget withouth the complexity of the graphics API, you can also just create a new QWidget and set the background with StyleSheets. Something like this:

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent)
{
    ...
    QWidget *pic = new QWidget(this);
    pic->setStyleSheet("background-image: url(test.png)");
    pic->setGeometry(QRect(50,50,128,128));
    ...
}
user251390
  • 141
  • 1
  • 2
5
  1. Add Label (a QLabel) to the dialog where you want to show the image. This QLabel will actually display the image. Resize it to the size you want the image to appear.

  2. Add the image to your resources in your project.

  3. Now go into QLabel properties and select the image you added to resources for pixmap property. Make sure to check the next property scaledContents to shrink the image in the size you want to see it.

That's all, the image will now show up.

zar
  • 11,361
  • 14
  • 96
  • 178
4

I understand your frustration the " Graphics view widget" is not the best way to do this, yes it can be done, but it's almost exactly the same as using a label ( for what you want any way) now all the ways listed do work but...

For you and any one else that may come across this question he easiest way to do it ( what you're asking any way ) is this.

QPixmap pix("Path\\path\\entername.jpeg");
    ui->label->setPixmap(pix);

}

3

I want to display .jpg image in an Qt UI

The simpliest way is to use QLabel for this:

int main(int argc, char *argv[]) {
    QApplication a(argc, argv);
    QLabel label("<img src='image.jpg' />");
    label.show();
    return a.exec();
}
genesis
  • 50,477
  • 20
  • 96
  • 125
Vanuan
  • 31,770
  • 10
  • 98
  • 102
3

Using QPainter and QImage to paint on a window-widget (QMainWindow) (just another method)

class MainWindow : public QMainWindow
{    
    public:
        MainWindow();
    protected:
        void paintEvent(QPaintEvent* event) override;

    protected:
        QImage image = QImage("/path/to/image.jpg");
};

// for convenience resize window to image size
MainWindow::MainWindow()
{
    setMinimumSize(image.size());
}

void MainWindow::paintEvent(QPaintEvent* event)
{
    QPainter painter(this);
    QRect rect = event->rect();
    painter.drawImage(rect, image, rect);
}


int main(int argc, char** argv)
{
    QApplication a(argc, argv);

    MainWindow mainWindow;
    mainWindow.show();
    return a.exec();
}
ArchLinuxTux
  • 840
  • 1
  • 11
  • 28