Vue img src path does not work the same as :src

Question

I use Vue. I try to output an image and it works fine when I use src but not when I use :src.

Works

<img src="../assets/image.png" />

Does not work

<img :src="`../assets/${image}.png`" />

What I've tried, but did not work

@ first in the path.
~ first in the path.
./ first in the path.
/ first in the path.
require but it throws an error if the image can't load. I prefer the native broken image icon, which does not break the script.

My output

The variable image contains the filename which in this case would be image.

The output from both version is like below:

<img src="../assets/image.png" data-v-469af010=""> <!-- src -->
<img src="/img/image.f556f8c5.png" data-v-469af010=""> <!-- :src -->

For some reason they differ quite alot.

How can I solve it?

Where does the image variable come from? Which error did you get? Your code should work. — Bulent
– Bulent, Commented Oct 29, 2020 at 19:29
This is wired, and I don't know where f556f8c5 came from. I don't understand how the base path has changed. First, where image variable came from (v-for, data object, method, computed property, prop, store)? Second, instead of img tag, add a <span>{{image}}</span> and see what is the real value. — Bulent
– Bulent, Commented Oct 29, 2020 at 20:08
@BoussadjraBrahim Yes, Vue CLI and it does something magical with the srcversion as seen in the output, changing the path and add some hash id. — Jens Törnell
– Jens Törnell, Commented Oct 29, 2020 at 22:01

Gbenankpon Arthur · Accepted Answer · 2020-10-29 22:39:36Z

1

I solved this problem with this:

<img :src="cover(url)" /> // I call a method cover.

// Method cover
cover(url) {
    if (url !== ''){ // You can check any matching expression.
         try {
             url = require('@/assets/img/' + url)
         } catch (e) {
             url = require('@/assets/img/default.jpg'); // I used a default image. 
         }
     }
     else
         url = require('@/assets/img/default.jpg'); // Default image. 
     return url;
}

edited Oct 29, 2020 at 22:39

answered Oct 29, 2020 at 21:20

Gbenankpon Arthur

1672 silver badges6 bronze badges

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

Comments

topdev87 · Accepted Answer · 2020-10-29 19:43:52Z

0

Bind src to the method.

getImgUrl(image) {
    return `../assets/${image}.png`
  }

in HTML

<img :src="getImgUrl(image)" />

answered Oct 29, 2020 at 19:43

topdev87

8,7913 gold badges11 silver badges33 bronze badges

2 Comments

Jens Törnell Over a year ago

I got the same problem, exactly the same src path as without the bind.

topdev87 Over a year ago

can you tell me what the error is if you use my answer?

ArtSur · Accepted Answer · 2020-10-29 19:56:36Z

0

If image variable is name of file

<img :src="'../assets/'+image" />

You should not use $ in template.

answered Oct 29, 2020 at 19:56

ArtSur

992 silver badges8 bronze badges

1 Comment

Jens Törnell Over a year ago

That's old code. In ES5+ we can use what I did. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Vue img src path does not work the same as :src

Works

Does not work

What I've tried, but did not work

My output

3 Answers 3

Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

Works

Does not work

What I've tried, but did not work

My output

3 Answers 3

Comments

2 Comments

1 Comment

Related