TestImage

Button.qml

import QtQuick 2.0

Rectangle {
    color: "red"
    signal signalCplusplus();
    Text{
        text: Vendor
    }

    MouseArea {
        anchors.fill: parent
        //onClicked: myObject.buyNowClick()
//        onClicked: object.
    }
}

deployment.pri

unix:!android {
    isEmpty(target.path) {
        qnx {
            target.path = /tmp/$${TARGET}/bin
        } else {
            target.path = /opt/$${TARGET}/bin
        }
        export(target.path)
    }
    INSTALLS += target
}

export(INSTALLS)

Detail.qml

import QtQuick 2.0
import QtQuick.Controls 2.0

Page {
    property string man
    header:ToolBar{
        ToolButton{
            text: qsTr("Back")
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            anchors.leftMargin: 50
            onClicked: stackView.pop()
        }
    }

    Label {
        text: "My Name is " + man
        anchors.centerIn: parent
    }
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

#include <QSqlError>

#include "MDataBaseTableModel.h"
#include "MDisplayImage.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QString dbName( "/home/qhipa/example.db" );
    QSqlDatabase db = QSqlDatabase::addDatabase( "QSQLITE" );
    db.setDatabaseName( dbName );

    if(db.open()){
        qDebug()<< "query to database successfully";
    }else{
        qDebug()<< "query to database failed"<< db.lastError();
    }

    MDataBaseTableModel *objectModel = new MDataBaseTableModel;


    qDebug()<<objectModel->roleNames();

    QQmlApplicationEngine engine;
    qmlRegisterType<MDisplayImage>("ImageConnected",1,0,"MDisplayImage");
    engine.rootContext()->setContextProperty("modelSQL",objectModel);
    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
    return app.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import ImageConnected 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    header: ToolBar{
        Label{
            text: qsTr("Welcome")
            font.pixelSize: 50
            anchors.centerIn: parent
        }
    }

    SwipeView {
        id: swipeView
        anchors.fill: parent

        Page {
            StackView{
                id: stackView
                anchors.fill: parent
                initialItem: MainPage{}
            }
        }
    }
}

MainPage.qml

import QtQuick 2.4
import QtQuick.Controls 2.0
Page {
    //property Image test
    GridView {
        id: gridViewPro
        x: 50
        y: 100
        width: 1350
        height: 760
        model : modelSQL
        delegate: ItemDelegate{
            width: 450
            height: 320

            SubProduct{}
            MouseArea{
                anchors.fill: parent
                onClicked: stackView.push("qrc:/Detail.qml", {man : Vendor})
            }
        }
        highlight: Rectangle {
            width: 500
            height :400
            color: "red"; radius: 5
        }
        focus: true
        cellWidth: 500
        cellHeight: 400
    }

}

Market.pro

QT += qml quick sql

CONFIG += c++11

SOURCES += main.cpp \
        MDatabase.cpp\
        MDatabaseHelper.cpp \
    MDataBaseTableModel.cpp \
    MDisplayImage.cpp
HEADERS += MDatabase.h\
           MDatabaseHelper.h \
    MDataBaseTableModel.h \
    MDisplayImage.h

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Default rules for deployment.
include(deployment.pri)

MDatabase.cpp

#include "MDatabase.h"
/*
 * THis program use to
 * - create tables
 * - work with database : insert, search, get database
 * */

MDatabase.h

#ifndef MDATABASE_H
#define MDATABASE_H
#include <QtSql/QSql>
#include <QSqlDatabase>
#include "MDatabaseHelper.h"
class Mdatabase:public MDatabaseHelper
{
public:
    Mdatabase(QString& path):MDatabaseHelper(path){}

private:
    QSqlDatabase m_db;

};

#endif // MDATABASE_H

MDatabaseHelper.cpp

#include "MDatabaseHelper.h"
#include <QDebug>
#include <QtSql>
#include <QSqlQuery>
#include <QSqlError>
/*
 * |productID|Name    |Type   |Vendor |Original|Price  |State  |Image|Promotion|
 * |CHAR(n)  |CHAR(n) |CHAR(n)|CHAR(n)|CHAR(n) |INT    |CHAR(n)|BLOB |INT      |
*/

MDatabaseHelper::MDatabaseHelper()
{

}
MDatabaseHelper::MDatabaseHelper(QString& path)
{
    m_db = QSqlDatabase::addDatabase("QSQLITE");
    m_db.setDatabaseName(path);

    if(m_db.open()){
        qDebug()<< "query to database successfully";
    }else{
        qDebug()<< "query to database failed"<< m_db.lastError();
    }
}
bool MDatabaseHelper::createTable(){
    bool success = false;

    QSqlQuery tableQuery(m_db);
    tableQuery.prepare("CREATE TABLE productMarket (productID VARCHAR(255),\
                                                    Name VARCHAR(255),\
                                                    Type VARCHAR(255),\
                                                    Vendor VARCHAR(255),\
                                                    Original VARCHAR(255),\
                                                    Price INTEGER,\
                                                    State VARCHAR(255),\
                                                    imageData BLOB,\
                                                    Promotion INTEGER)");
    if(tableQuery.exec()){
        qDebug()<< "Creat table successfully";
        success = true;
    }else {
        qDebug()<< "Create table failed"<<m_db.lastError();

    }
    tableQuery.finish();
    return success;

}
int MDatabaseHelper::get_last_id_record(){
    QSqlQuery lastQuery(m_db);
    lastQuery.prepare("SELECT * FROM imageData ORDER BY 1 DESC LIMIT 1;");
    if(lastQuery.exec()){
        qDebug()<< "find last success";
    }else {
        qDebug()<< "find last failed";
    }
    int idInit = lastQuery.record().indexOf("id");
    while(lastQuery.next()){
        int idLast = lastQuery.value(idInit).toInt();
    //    int idInit = id_last.toInt();
        qDebug() << "id last : "<<idLast;
        lastQuery.finish();
        return idLast;
    }

}

MDatabaseHelper::~MDatabaseHelper(){
    if(m_db.open())
        m_db.close();
}

MDatabaseHelper.h

#ifndef MDATABASEHELPER_H
#define MDATABASEHELPER_H
#include <QtSql/QSql>
#include <QSqlDatabase>

class MDatabaseHelper
{
public:
    MDatabaseHelper();
    MDatabaseHelper(QString& path);
    bool createTable();
    bool addNewItem();
    bool insertNewItem();
    int get_last_id_record();
    ~MDatabaseHelper();
private:
    QSqlDatabase m_db;
};

#endif // MDATABASEHELPER_H

MDataBaseTableModel.cpp

#include "MDataBaseTableModel.h"

#include <QImage>
#include <QSqlRecord>
#include <QDebug>


MDataBaseTableModel::MDataBaseTableModel(QObject *parent, QSqlDatabase db):
    QSqlTableModel(parent, db)
{
    setTable("productMarket");
    select();
}
QVariant MDataBaseTableModel::data(const QModelIndex &index, int role) const
{
    QVariant value;

    if (index.isValid()) {
        if (role < Qt::UserRole) {
            value = QSqlTableModel::data(index, role);
        } else {
            int columnIdx = role - Qt::UserRole - 1;
            QModelIndex modelIndex = this->index(index.row(), columnIdx);
            value = QSqlTableModel::data(modelIndex, Qt::DisplayRole);
            //imageData is the name of blob type column
            if(roleNames().value(role) == "imageData")
                return QImage::fromData(value.toByteArray());
        }
    }
    return value;
}
QHash<int, QByteArray> MDataBaseTableModel::roleNames() const
{

    QHash<int, QByteArray> roles;
    for (int i = 0; i < record().count(); i ++) {
        roles.insert(Qt::UserRole + i + 1, record().fieldName(i).toUtf8());
    }
    return roles;
}

MDataBaseTableModel.h

#ifndef MDATABASETABLEMODEL_H
#define MDATABASETABLEMODEL_H
#include <QSqlTableModel>
#include <QSqlDatabase>

class MDataBaseTableModel:public QSqlTableModel
{
    Q_OBJECT
public:
    explicit MDataBaseTableModel(QObject * parent =0, QSqlDatabase db=QSqlDatabase());
    void connectDb();
    QVariant data(const QModelIndex &index, int role) const Q_DECL_OVERRIDE;
    QHash<int, QByteArray> roleNames() const Q_DECL_OVERRIDE;

};

#endif  //MDATABASETABLEMODEL_H

MDisplayImage.cpp

#include "MDisplayImage.h"
#include <QPainter>

MDisplayImage::MDisplayImage()
{

}
void MDisplayImage::setImage(const QImage &image){
    m_image = image;
    emit imageChanged();
    update();
    setImplicitHeight(image.height());
    setImplicitWidth(image.width());
}
void MDisplayImage::paint(QPainter *painter){
    m_image = m_image.scaled(width(), height(),Qt::KeepAspectRatio);
    if(m_image.isNull()) return;
    painter->drawImage(0,0,m_image);

}

MDisplayImage.h

#ifndef MDISPLAYIMAGE_H
#define MDISPLAYIMAGE_H
#include <QQuickPaintedItem>
#include <QImage>
#include <QtQuick/qquickitem.h>
class MDisplayImage:public QQuickPaintedItem
{
    Q_OBJECT
    Q_PROPERTY(QImage image READ image WRITE setImage NOTIFY imageChanged)
public:
    explicit MDisplayImage(QQuickItem * parent): QQuickPaintedItem(parent){}
    QImage image() const { return m_image;}
    void setImage(const QImage& image);
    void paint(QPainter *painter) Q_DECL_OVERRIDE;
    MDisplayImage();
private:
    QImage m_image;
signals:
   void imageChanged();
};

#endif // MDISPLAYIMAGE_H

qml.qrc

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
        <file>MainPage.qml</file>
        <file>Button.qml</file>
        <file>SubProduct.qml</file>
        <file>Detail.qml</file>
    </qresource>
</RCC>

SubProduct.qml

import QtQuick 2.0
import QtQuick.Layouts 1.3
import ImageConnected 1.0
ColumnLayout{
    spacing: 0
    Rectangle{
        Layout.alignment: Qt.AlignCenter
        Layout.preferredWidth: 450
        Layout.preferredHeight: 300
        RowLayout{
            spacing: 0
            Rectangle{
                Text{
                    text : Original //Original display fine in UI, it is collumn name of my database
                }
                id: imagePlace
                Layout.minimumWidth: 150
                Layout.minimumHeight: 300
                MDisplayImage{
                    width: 150
                    height:300
                    image: imageData //imagedata is a column of my database has type BLOB
                }

            }
            Rectangle{
                id:infor
                Layout.minimumWidth: 300
                Layout.minimumHeight: 300
                ColumnLayout{
                    spacing: 0
                    Rectangle{
                        Layout.minimumWidth: 300
                        Layout.minimumHeight: 270
                        color: "#df745a"
                    }
                    Rectangle{
                        Layout.minimumWidth: 150
                        Layout.minimumHeight: 30
                        color: "yellow"
                        Button{
                            width: 300
                            height: 30
                        }

                    }
                }
            }

        }

    }
    Rectangle{
        Layout.alignment: Qt.AlignCenter
        Layout.preferredWidth: 450
        Layout.preferredHeight: 20
        color: "#8dd321"
//        Text{
//            text:name
//        }
    }
}

Output: