Cara menggunakan pembolehubah sebagai imej src - vue.js

Question

Saya baru menggunakan Vue dan melakukan beberapa html dan css dan saya mahu menggunakan pembolehubah untuk direktori imej tetapi imej tidak pernah dimuatkan dan pembolehubah sedang dikemas kini oleh fungsi tauri yang sah dan saya memerlukan imej untuk berubah juga.

Ini adalah sebahagian daripada kod saya

<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

Mengikut kod anda, anda menggunakan API Komposisi Vue3. Terdapat sesuatu yang hilang dalam kod anda yang mungkin tidak menjadikan apl anda berfungsi dengan baik.

1. Seperti yang orang lain nyatakan, anda tidak menggunakan pendakap kerinting dalam atribut. Anda gunakan

<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. Apabila anda menggunakan API gubahan, anda mesti mengimport fungsi seperti ref dahulu.

<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>

Tambahan : Apabila berurusan dengan nilai yang tidak memerlukan hujah, biasanya lebih baik menggunakan 计算. Lihat Vue Computed Properties

<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
})