Vue 3 - zmiania adresu obrazka w :src po naciśnięciu buttona...

0

Link do całego kodu -> https://paste.ofcode.org/zJ2RjLNaUuvfW3C7QyjHeq

Piszę sobie prostą apkę z wykorzystaniem tensorflow. Właściwie jest to część pewnego tutoriala.
Program działa jak ta część kodu pozostaje bez zmian:

<img
              src="https://images.unsplash.com/photo-1561157437-415893bd7149"
              ref="imageToDetect"
              crossorigin="anonymous"
              class="rounded-2xl"
              style="width: 90%"
            />

Ten sam adres w obiekcie ref przechowującym string adress..

const imageToDetect = ref("https://images.unsplash.com/photo-1561157437-415893bd7149");

Chciałbym zmienić trochę apkę, więc:
Teraz mam button i funkcję changeImage, która po prostu zmienia imageToDetect na jakiś inny adres obrazka. Np. samochodu garbus. Postawiłem zrobić bind :src i związać go z refem imageToDetect:

<img
              :src="imageToDetect"
              ref="imageToDetect"
              crossorigin="anonymous"
              class="rounded-2xl"
              style="width: 90%"
            />

I teraz funkcja, która zmienia adres obrazka:

function changeImage() {
      console.log("Changed image.");
      imageToDetect.value = "https://images.unsplash.com/photo-1489824904134-891ab64532f1";
    }

Po tych zmianach obrazek nie wyświetla się, a funkcja prawdopodobnie nie przypisuje do ref nowego adresu.
edit: spróbuję jeszcze zmienić z ref na reactive.
ps jesteście moją ostatnia dyktą ratunku

1

Rzeczy do poprawienia, ja tak poprawiłem u siebie i wszystko działa, chyba że coś pominąłem.

import { ref, onMounted } from "vue";
const imageToDetect = ref();
onMounted(() => {
    imageToDetect.value.src = "https://images.unsplash.com/photo-1561157437-415893bd7149";
})
model.detect(imageToDetect.value).then((predictions) => {
    console.log("predicted: " + predictions[0].class);
    detectionResult.value = predictions[0].class;
});
function changeImage() {
    console.log("Changed image.");
    imageToDetect.value.src = "https://images.unsplash.com/photo-1489824904134-891ab64532f1";
}
<img
    ref="imageToDetect"
    crossorigin="anonymous"
    class="rounded-2xl"
    style="width: 90%"
/>

ref() jest zwracana dopiero jak się strona załaduje, to musisz użyć onMounted function.
I wtedy imageToDetect będzie miało pod .value referencje do img czyli będzie równe == document.queryElement("img").
Potem .src żeby dostać się do atrybutu source.

Jak będzie wszystko dobrze to nie zapomnij zaakceptować posta.

0

Ok działa, Powiem ci, że kombinowałem wcześniej z odniesieniem .src. W ogóle zmyliło mnie to, że w tagu obrazka obowiązkowe jest :src lub src=
Dam to wszystko do reactive, żeby było w jednym miejscu. Jeszcze zrobię taki input do którego mozna wkleić adres obrazka żeby było więcej możliwości.

Co jak co ale tensorflow to dobry wynalazek.

0

Pozwolę sobie odświeżyć problem ponownie. Wszystko działa ale chciałbym przenieść dane do wnętrza reactive żebym nie musiał się odnosić poprzez .value.
Nie działający kod: https://www.paste.org/116780

const state = reactive({
      isDetecting: false,
      imageToDetect: "",
      imageLinkInput: "",
      detectionResult: "",
    });

Dodatkowo usunałem .value w kilku linijkach kodu, ponieważ jak mam dane w reactive nie muszę już odnosić się przez value. No i appka nie działa. Obrazek się wyświetla ale już tensor nie chce wykrywać.

Wpadłem na inny pomysł aby imageToDetect przenieść na zewnątrz i zrobić z niego ref. I zaczęło działać. Czyli rozumiem, że imageToDetect musi być jako ref, a nie reactive? Może nie rozumiem różnic kiedy używać ref, a kiedy reactive. Czy jest możliwość aby imageToDetect dać do wnętrza reactive?
Działający kod: https://www.paste.org/116781

const imageToDetect = ref("");

    const state = reactive({
      isDetecting: false,
      imageLinkInput: "",
      detectionResult: "",
    });
1

Myślisz, że wiem jak reactive działa?
Muszę sobie odpalić twój kod u siebie i odpalic dokumentację tego reactive bo nigdy tego nie widzialem na oczy, a jestem młody.

Pewnie i tak to nie jest żaden trudny błąd do poprawienia, ani skomplikowany.
mam trochę czasu to ci poprawię kod jak potrzebujesz.

1

Jak masz mało itemow to uzywasz ref, jak duzo to reactive, zamiast imageToDetect.value odnosisz się state.imageToDetect
jeszcze musisz dodać w return { ...toRefs(state) }

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0