我是 Vue 的新手，做了一些 html 和 css，我想使用一個變數作為影像目錄，但影像永遠不會加載，該變數正在由一個有效的 tauri 函式更新，我需要更改影像以及。
這是我的一些代碼
<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>
uj5u.com熱心網友回復：
根據您的代碼，您正在使用 Vue3 Composition API。您的代碼中缺少一些可能無法使您的應用正常運行的內容。
- 正如其他人提到的，您不在屬性中使用大括號。你用
<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
- 當您使用組合 API 時，您必須首先匯入函式，例如
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() {
return require(data1.value)
}
</script>
額外：當處理不需要引數的值時，通常使用computed會更好。參考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
})
uj5u.com熱心網友回復：
嘗試不使用大括號：
<img :src="data">
uj5u.com熱心網友回復：
首先，語法是：
v-bind:src /*or :src */
而不是 <img src = {{data}}>。
接下來，系結資料應該是vue 實體的一部分。否則在系結時會出現錯誤。
屬性或方法“getimg”未在實體上定義，但在渲染期間被參考。
最后，如果你想將值系結到一個函式，你應該像這樣運行函式：
<img :src="get_image()">
<!-- Not <img :src="get_image"> -->
基本代碼段示例（vue 2）：
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: () => ({
photo_path: "https://picsum.photos/id/237/111/111",
}),
methods: {
get_image: function() {
return "https://picsum.photos/id/237/111/111";
},
}
})
/* will not work */
function not_working(){
return "https://picsum.photos/id/237/111/111";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Import Numeral.js (http://numeraljs.com/#use-it) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.0/numeral.min.js"></script>
<!-- Then import vue-numerals -->
<script src="https://unpkg.com/vue-numerals/dist/vue-numerals.min.js"></script>
<div id="app">
<img :src="photo_path">
<img :src="get_image()">
<img :src="not_working">
</div>v 系結檔案：
- https://vuejs.org/api/built-in-directives.html#v-bind
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/535587.html
標籤：vue.js
上一篇：：懸停旋轉保持位置懸停
下一篇：系結動態組件