Problems displaying image taken from sqlite3 database in vue.js - vue.js

Question

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