Comment utiliser une variable comme image src - vue.js

Question

Je suis nouveau sur Vue et je fais du HTML et du CSS et je souhaite utiliser une variable pour le répertoire d'images mais les images ne se chargent jamais et la variable est mise à jour par une fonction tauri valide et j'ai également besoin que les images changent.

Voici une partie de mon code

<template>
<img v-bind:src=getimg()>

   -- and --

<img :src = {{data}}}>

   -- and --

<img src = {{data}}>

   -- and much more ... --
</template>

<script setup>
var data = ref("./assets/4168-376.png")

function getimg() {
    console.log(data1.value)
    return require(data1.value)
}
</setup>

Answer 1

Selon votre code, vous utilisez l'API de composition Vue3. Il manque quelque chose dans votre code qui pourrait ne pas permettre à votre application de fonctionner correctement.

1. Comme d'autres l'ont mentionné, vous n'utilisez pas d'accolades dans les attributs. Vous utilisez

<img :src="variable"> // just use : in front of an attribute and it will consider as v-bind
<img v-bind:src="variable"> // or you directly use v-bind, less commonly used
<img :src="'static string'"> // no point doing this, but just a reference of how it works

2. Lorsque vous utilisez l'API de composition, vous devez d'abord importer des fonctions telles que ref.

<template>
  <img :src="data">
  <img v-bind:src="data">
  <img :src="getimg()">
</template>

<script setup>
import { ref } from 'vue'

const data = ref("./assets/4168-376.png") // prefer const over var cus this variable will never be reassigned

function getimg() {
   // why are you using data1.value tho? It should be data.value
   // also i don't think 'require' is needed here 
   return require(data1.value) // i just copy paste from your code
}
</script>

Extra  : Lorsqu'il s'agit de valeurs qui ne nécessitent pas d'arguments, il est généralement préférable d'utiliser 计算. Voir Propriétés calculées Vue

<template>
   <img :src="data">
   <img v-bind:src="data">
   <img :src="getImg">
</template>

<script setup>
import { ref, computed } from 'vue' // import it first

const data = ref("./assets/4168-376.png")

const getImg = computed(() => {
  return data.value
})