Problems displaying image taken from sqlite3 database in vue.js

88 Views Asked by At

I'm building a social media-like web app, but I'm having trouble displaying images on the frontend. For the realization I'm using openAPI , Golang for the backend, sqlte3 database, vue.js for the frontend. For photos on the database I use a table with the specific fields:

var tablePhoto string
    err5 := db.QueryRow(`SELECT name FROM sqlite_master WHERE type='table' AND name='photo';`).Scan(&tablePhoto)
    if errors.Is(err5, sql.ErrNoRows) {
        sqlStmt := `
        CREATE TABLE IF NOT EXISTS photo (photo_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, user_id_owner_photo INTEGER NOT NULL, image BLOB, date_time datetime NOT NULL, UNIQUE(date_time))`
        _, err5 = db.Exec(sqlStmt)
        if err5 != nil {
            return nil, fmt.Errorf("error creating database structure: %w", err5)
        }
    }

and a structure of Photo:

type Photo struct {
    User_id_owner_photo int
    Photo_id            int
    Image               []byte
    Date_time           time.Time
}

Interacting with the api I upload the photo by inserting the image via binary file and enter it into the database.

func (rt *_router) uploadPhoto(w http.ResponseWriter, r *http.Request, ps httprouter.Params, ctx reqcontext.RequestContext) {

    user_id, err := strconv.ParseInt(ps.ByName("user_id"), 10, 0)
    if err != nil {
        w.WriteHeader(http.StatusBadRequest)
        return
    }

    buffer, err := io.ReadAll(r.Body)
    // buffer, err := ioutil.ReadAll(r.Body)
    if err != nil {
        w.WriteHeader(http.StatusBadRequest)
        return
    }

    var photo Photo

    my_time := time.Now()

    photo.User_id_owner_photo = int(user_id)
    photo.Image = buffer
    photo.Date_time = my_time

    dbPhoto, err := rt.db.UploadPhoto(photo.ToDatabase_photo())
    if err != nil {
        ctx.Logger.WithError(err).Error("can't create the photo!")
        w.WriteHeader(http.StatusInternalServerError)
        return
    }

    photo.FromDatabase_photo(dbPhoto)

    w.Header().Set("Content-Type", "application/json")
    _ = json.NewEncoder(w).Encode(photo)

}

When I upload the photo from the frontend I use a choose file button which allows me to choose a file, and for that button I use a function :

async choose(files_) {
            const reader = new FileReader();
            console.log(files_)
            reader.readAsDataURL(files_)
            reader.onloadend = (event) => {
                this.image = new Uint8Array(event.target.result);
            }
        }

which allows me to transform the taken file into blob, once this is done in another view I want to show the image, so I take my profile data with a method in the :

let response = await this.$axios.get("/users/" + Number(this.userId));
this.profile = response.data;

and show the image in a template div:

<img src="'data:image/jpeg;base64,' + photo.Image" width="300" height="300" >

By doing this, the photos are not shown to me enter image description here

and this is shown to me in the consoleenter image description here

0

There are 0 best solutions below