How to make :src="user.photo" work?

Question

Vue.js

Good afternoon.
In vuetify, there is a v-img component, if you write src="../assets/0.jpg", then everything works, if :src="user.photo", then no, although the value is the same. Tell me, pliz, how to get around the problem? Thanks in advance.

Answer 1

Try like this:src="require(`@/assets/${user.photo}`)"

Answer 2

although the meaning is the same

Not the same. Depending on what you want, include in the assembly or link to a third-party image.
In the first case, the file is picked up by the collector.
In the second, you will get the string as is (open the source code of the result, look).
:src="user.photo" should be used if you have images on the API server for example.

Answer 3

I'm just learning)))
in the same steppe as Sergey Mukhin It's
one thing a static file
1.

Image: '/static/images/logo.png'
<img :src="Image">

"pure" static
2.

Image: require('/assets/images/logo.png')
<img :src="Image">

"computed", but still static. dev and build will collect the pictures in one place and add a unique hash to the name.
But the computed "path" is another matter:
I'm afraid I'll have to come up with an initialization of user.photo:
if there are not enough of them, assign the photoNNN variables to the variables in advance via require. And then compute user.photo by passing the photoNNN object.