How to use a variable as an image src - vue.js - vue.js

Question

I'm new to Vue and done a little bit of html and css, i want to use a variable as the image directory but the image never loads, the variable is being updated by a tauri function which works and i need the image to change as well.
this is a bit of my 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

Based on your code, you are using Vue3 Composition API. There are a few things that are missing from your code that probably didn't made your app work.
As others have mention, you don't use curly braces in the attributes. You use
<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
When you are using composition API, you will have to import the functions first such as 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: when dealing with values that does not require a parameter, usually using computed will be better. Refer 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
})

Answer 2

Try without curly braces:
<img :src="data">

Answer 3

First, the syntax is:
v-bind:src /*or :src */
And not <img src = {{data}}>.
Next, the bind data should be part of the vue instance. Otherwise on binding you get an error.
Property or method 'getimg' is not defined on the instance but
referenced during render.
Last, if you want to bind the value to a function you should run the function like this:
<img :src="get_image()">
<!-- Not <img :src="get_image"> -->
Basic Snippet example (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-bind docs:
https://vuejs.org/api/built-in-directives.html#v-bind