problem z wyswietlaniem zdjeć z serwera w htmlu

Question

Mam problem z wyświetlaniem obrazów w htmlu. Jestem zielony w temacie danych binarnych, ale kombinowałem na różne sposoby i nic ;(
Tutaj jest troche zdjec opisujacych nurtujacy mnie problem z przesyłaniem zdjęć z serwera do tagu img

Uzywam vue.js do frontendu i probuje wyswietlic zdjecia z bazy danych (mongoDb) na jednej z zakladek aplikacji.
Elementy img ladują zgodnie z iloscia zdjec przypisanych do uzytkowanika w bazie danych , ktora miesci sie w zbiorze mediafiles .Wszystko sciagnane jest przez request podczas cyklu  created() , a pozniej tagi ladowane sa dynamicznie poprzez v-for
 

<div v-for="(mediafile, index) in mediafiles" :key="index" class="thumbnailSlate">
  <div class="deleteRTG">
    <img src="../../../assets/orange donut.png" @click="deleteAfile(mediafile)" alt="">
    <img id="orangeCircle" src="../../../assets/orange-circle.png" @click="deleteAfile(mediafile)" alt="">
  </div>
  <img :src="'http://localhost:3000/public/'+mediafile" alt="" @click="openModal(mediafile)">
</div>

Niestety na stronie nie wyswietla sie zaden obraz tylko puste "div-y", wiec sie troche D(Z)IWIE :)
 

Zdjecie wsadzilem w folder "public" , zeby sprawdzic, czy sie w ogole sciaga, no i wychodzi na to, ze tak, bo w narzedziach > Network pokazuje mi je przy podgladzie
Wpisalem pierwszy lepszy url  z internetu do atrybutu src i wszystko hula:


Teraz cos ciekawego. Po ponownym zaladowaniu strony, zdjecie magicznie pojawia sie, gdzie powinno ( pewnie zostalo zapisane w cashu za pierwszym razem) - tak, to sa zeby po leczeniu kanałowym :)

Po wyczyszczeniu cashe, znowu pusty div. Tak, jak wczesniej pisalem, jestem bardzo poczatkujacy w temacie i licze na wyrozumialosc. Z gory dziekuje za pomoc

Comments

Radził bym ci jak najszybciej uciec z tego typu podejścia. Baza danych nie jest stworzona do przechowywania obrazków. Po obrazkach nie szukasz / nie sortujesz po plikach binarnych i nie robisz absolutnie nic co tłumaczyło by trzymanie tego w bazie. Najprostszym podejściem jest tworzenie plików graficznych z losowa nazwa a następnie w bazie danych trzymanie tylko nazwy pliku.

Answer 1

Uzywam crypto na serwerze go generowania imion.
GridFs dla mongo dziala na bazie indexu imion - przynajmniej tak mi sie wydaje.
 

 file: (req, file) => {
      return new Promise((resolve, reject) => {
        crypto.randomBytes(20, (err, buf) => {     // generating unique names to avoid duplicates
          if (err) {
            return reject(err);
          }
          const filename = buf.toString('hex') + path.extname(file.originalname);
          const fileInfo = {
            filename: filename,
            bucketName: 'media',
            metadata: req.body.dateTaken
          };
          resolve(fileInfo);
        });
      });
    }

Rejestr nazw zdjec trzymam w polu "mediafiles" w dokumencie uzytkownika jako prosty zbior []

Udalo mi sie rozwiazac problem, przynajmniej na razie :)
Wykorzystalem do tego osobne life cycle hooks w vue.js

1. created()   // sciaga pliki z bazy do folderu public, zebym mogl podpiac "src" kazdego img jak w kodzie na poczatku postu (oddzielny request dla kazdego pliku). Vuex ma wczesniej wszystkie dane uzytkownika, w tym mediafles[] z nazwami zdjec

   created() {
        this.items = this.$store.state.StorePatient.visits;
        let files = this.$store.state.StorePatient.mediafiles; 
        if (files.length > 0) {
            for(let i=0;i< files.length;i++) { 
                let innerfiles = files;    
                visitAxios.post(`http://localhost:3000/client/visits/files/download/${files[i]}`)
                .then(res => { 
                    console.log('added file...');
                })
                .catch( err => console.error(err));
            }
        }else {
            return;
        }
    },

2.mouted() //  uaktualnia lokalna liste komponentu, zeby mogl wygenerowac div-y dzieki v-for

    mounted() {
        setTimeout(()=>{
        this.mediafiles = this.$store.state.StorePatient.mediafiles;
        }, 2000);

Dodalem setTimeout, zeby dac wiecej czasu na sciaganie zdjec na serwer zanim dojdzie do generowania listy na stronie, ale chyba jest zbedny, bo mimo asynchronicznosci axios.post(), funkcja created() nie przejdzie do mounted() poki wszystkiego nie skonczy - zgadza sie?

Natomiast wszystkie proby ze streamowaniem prosto do klienta typu readStream.pipe(writeStream) to totalna porazka. Nie moge tego jakos podpiac pod element img, probujac base64 encoding. Jeszcze nie ten lewel....
Moze ktos ma inny pomysl? Jakie sugestie? Dzieki!