Vue JS v-for Loop to display images, string interpolation leads to error

Question

This is my data:

  data: () => ({
    html: [
      "../assets/html.png",
      "../assets/css.png",
      "../assets/scss.png",
      "../assets/materialize.png"
    ]
  })

I loop through like this, which shows the text stored in my data object:

<p v-for="img in html" :key="img">{{img}}</p>

However I can not use interpolation inside elements, so the following code does not work.

  <v-flex xs6 md3 v-for="img in html" :key="img">
    <img src={{img}} alt />
  </v-flex>

How can I do this?

Edit: No errors, but not working yet: The HTML link looks like this (working):

</v-flex>
  <v-flex xs6 md3><img src=../assets/html.png alt /></v-flex>
</v-layout>

src="/img/html.6ec9ec76.png"

Rendered by vue: src="../assets/materialize.png

Vue does not handle it correctly it seems!

To "interpolate" between the tags, you use {{ }} syntax, but to interpolate inside the opening tag, you've to use the v-bind directive, or the syntactic sugar with a colon only :. v-bind:src="img", or :src="img" instead of src={{img}} — Loi Nguyen Huynh
– Loi Nguyen Huynh, Commented Jan 12, 2020 at 11:50
This is a dublication, you can easly find answer in 1 min on stackoverflow — Adam Orłowski
– Adam Orłowski, Commented Jan 12, 2020 at 11:55

Loi Nguyen Huynh · Accepted Answer · 2020-01-12 11:44:21Z

1

Try to use <img :src="img" alt /> instead

answered Jan 12, 2020 at 11:44

Loi Nguyen Huynh

10.2k5 gold badges33 silver badges58 bronze badges

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

1 Comment

Data Mastery Over a year ago

does not solve everything, no error, but nothing displayed. Updated my question

Potato · Accepted Answer · 2020-01-12 11:44:51Z

1

string interpolation can only be used to display for value in attribute you have to bind it:

<v-flex xs6 md3 v-for="img in html" :key="img">
    <img :src="img" alt />
</v-flex>

answered Jan 12, 2020 at 11:44

Potato

9181 gold badge9 silver badges19 bronze badges

1 Comment

Data Mastery Over a year ago

do i have to change the links in the data object? No error, but nothing gets displayed

Collectives™ on Stack Overflow

Vue JS v-for Loop to display images, string interpolation leads to error

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related