如何使用变量作为图像src-vue.js

yquaqz18  于 2022-11-25  发布在  Vue.js
关注(0)|答案(3)|浏览(127)

我是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>
y1aodyip

y1aodyip1#

根据您的代码,您使用的是Vue3 Composition API。您的代码中缺少一些东西,可能无法使您的应用正常工作。
1.正如其他人提到的,在属性中不使用花括号。

<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

1.使用合成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() {
   // 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:当处理不需要参数的值时,通常使用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
})
knsnq2tg

knsnq2tg2#

尝试不使用大括号:

<img :src="data">
zpf6vheq

zpf6vheq3#

首先,语法为:

v-bind:src /*or :src */

而不是...
接下来,绑定数据应该是vue instance的一部分。否则,在绑定时会出现错误
属性或方法“getimg”未在示例上定义,但在呈现期间被引用。
最后,如果要将值绑定到函数,则应按如下方式运行该函数:

<img :src="get_image()">
  <!-- Not   <img :src="get_image"> -->

基本代码段示例(版本2):

第一次

v绑定文档:

  • https://vuejs.org/api/built-in-directives.html#v-bind

相关问题