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

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.

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

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

Try without curly braces:

<img :src="data">

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