CODEWITHSUNDEEP
vue.js
Findlay Bannatyne
Findlay Bannatyne

Reputation: 31

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

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>

Upvotes: 3

Views: 8812

Answers (3)

Remicaster
Remicaster

Reputation: 376

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

Upvotes: 5

Ezra Siton
Ezra Siton

Reputation: 7781

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:

Upvotes: 0

Vasyl
Vasyl

Reputation: 324

Try without curly braces:

<img :src="data">

Upvotes: 1

Related Questions