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 }}"
>
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
Did you try this?
:src="book.imageUrl"
I think you can't use {{var}} to pass a variable to attribute of Vue component
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}`)"
/>
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
