Vue JS data binding not working for img src

Question

I am using vue 2 and vue-cli 3. I am trying to bind the src of an tag to a variable in data.

Specifically I am doing the following:

<img class="img-time-matters" :src="`./../assets/time-comparison-${locale}.png`">

export default {
   name: "home",
   components: {},  
   data() {
       return {
           locale: locale // 'en'
       };
   }
}

The binding works

Using Chrome developer tools and examining the network activity I see that the binding works:

http://localhost:8080/assets/time-comparison-en.png

However the resource is not found.

If I remove data binding at hard code the course path to:

<img class="img-time-matters" :src="`./../assets/time-comparison-en.png`">

Vue resolves the resource link to look for the image at:

http://localhost:8080/img/time-comparison-en.74a6f0ca.png

How do I get the Vue to data bind in such a way that it resolves the binding correctly (i.e. time-comparison-en.74a6f0ca.png).

Thanks!

Which webpack plugins/loaders are you using?

Daniel
– Daniel

2019-03-13 23:59:56 +00:00
Commented Mar 13, 2019 at 23:59 — Daniel
– Daniel, Commented Mar 13, 2019 at 23:59

ittus · Accepted Answer · 2019-03-13 23:48:38Z

35

Please try require

<img class="img-time-matters" :src="require(`../assets/time-comparison-${locale}.png`)">

answered Mar 13, 2019 at 23:48

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bill Haack Over a year ago

Thanks ittus, much appreciated. I spent a bit of time banging my head against this problem. I saw this solution elsewhere but could not get it to work. I misapplies the require function by using it as follows: <img class="img-time-matters" :src=require("../assets/time-comparison-${locale}.png")> I kept receiving a syntax error. The require function needs to go INSIDE the ". Thanks again.

shivam bhushan Over a year ago

After a long, long search, the perfect solution, thanks ittus.

abdulkareem alabi · Accepted Answer · 2023-08-01 13:52:44Z

another alternative solution to fix the issue, is to import the image first as a module before binding to src, here is an example

<script>
import logo from "../assets/logo_800_white_background.png";
export default {
  data() {
    return {
      imgPath: logo,
    };
  },
};
</script>

<template>
  <div class="flex items-center justify-between py-6 max-w-[1155px] mx-auto">
    <div>
      <img
        :src="imgPath"
        alt="logo"
      />
    </div>
    <div class="flex items-center space-x-4">
      <router-link to="/">Home</router-link>
      <router-link to="/about">about</router-link>
      <router-link to="/software">software</router-link>
      <router-link to="/hardware">hardware</router-link>
      <router-link to="/contact">contact</router-link>
    </div>
  </div>
</template>

Collectives™ on Stack Overflow

Vue JS data binding not working for img src

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related