[Vuejs]-How to bind an image src attribute to a dynamic value

by

0👍

✅

Change it for :src="card.imageSource".

With the :src="{ card.imageSource }" you basically try to pass an object literal with a malformed object property.

Assuming your imageSource is 'http://example.com/img.jpg' you are effectively passing as a src the object { 'http://example.com/img.jpg' } which is not a valid object (nor a valid image URL).

To understand what I mean when I say you are passing an object literal, try doing that: :src="{ key: card.imageSource }" and inspect the DOM. Your error will disappear, and you will most likely see src="[object Object]".

If it’s still a bit hard to understand, try reading the section on interpolations in the Vue.js documentation, it will help you.

Leave a comment