vue interpolation inside of my image tag as src:" {{ image }}"

Question

I am trying to dynamically pass an image url to my vue application but it seems not to be working so now i am wondering if its even possible to do so.. Yes, Please let me know if this is possible in Vue / Vuetify

<v-img
  class="white--text align-end"
  height="200px"
  src="{{ book.imageUrl }}"
>

See also https://vuejs.org/v2/guide/syntax.html#Attributes – Phil Sep 09 '20 at 04:36 — Phil, Sep 09 '20 at 04:36

Blackraspberryyy · Answer 1 · 2020-09-09T05:17:31.930

1

You should use require() to your image urls, as suggested by KaelWD in this issue.

<v-img
  class="white--text align-end"
  height="200px"
  :src="require(`${book.imageUrl}`)"
/>

edited Sep 09 '20 at 05:17

answered Sep 09 '20 at 04:53

Blackraspberryyy

2,016
2
11
22

Kurt Chun · Accepted Answer · 2020-09-09T04:27:29.033

0

yes it is possible, just there is an error on your syntax.

suppose to use :src= instead of just normal src

:src="book.imageUrl"

colon in front of the attribute allow framework to see it as working code.

non colon will result the "{{ book.imageUrl }}" as normal string only

edited Sep 09 '20 at 04:27

answered Sep 09 '20 at 04:25

Kurt Chun

391
4
9

No, that does not work. I get an error – Karina Turtle Sep 09 '20 at 04:27
sorry got correction – Kurt Chun Sep 09 '20 at 04:27
@KarinaTurtle without the {{ }} – Kurt Chun Sep 09 '20 at 04:27
Did as well and nothing – Karina Turtle Sep 09 '20 at 04:29
@KarinaTurtle could you check if your book.imageUrl image source exist in your folder ? – Kurt Chun Sep 09 '20 at 04:31
@KarinaTurtle what error? – Phil Sep 09 '20 at 04:33
@Phil "[Vue warn]: Error compiling template: invalid expression: Unexpected token '{' in {{ Raw expression: :src='{{' – Karina Turtle Sep 09 '20 at 13:03
@kurtChun its coming from an API – Karina Turtle Sep 09 '20 at 13:04
@KarinaTurtle do try to console.log that imageUrl data, then paste the url on chrome new tab, see if the image existed or not – Kurt Chun Sep 11 '20 at 04:01

score 0 · Answer 3 · answered Sep 09 '20 at 04:26

0

Did you try this?

:src="book.imageUrl"

I think you can't use {{var}} to pass a variable to attribute of Vue component

answered Sep 09 '20 at 04:26

No this gives me an error.. – Karina Turtle Sep 09 '20 at 04:29
1

show me the error. I think you are having another issue, it's not about image component with dynamic link :) – Sep 09 '20 at 04:35

score 0 · Answer 4 · answered Sep 09 '20 at 05:30

This is what I have used in a project

:src="require('../../assets/img/logos/' + vendor.vendor_identifier + '.png')"

Webpack needs you to restrict the amount of possible files by giving it a part of the path as a literal string, at least - or the whole path, in the best case.

Relevant docs: https://webpack.js.org/guides/dependency-management/#require-with-expression

So the method everyone mentioned is basically correct but you just have add half the path inside the require('../../assets/img/logos/') . Also can you show what you are sending in {{book.imageUrl}} ?

First I would hard code the link/path sent in book.imageUrl and see if the error exists

Can you console.log(book.imageUrl) to see what the link looks like? — Fawad, Sep 10 '20 at 06:21

vue interpolation inside of my image tag as src:" {{ image }}"

4 Answers4