V-data-table image link-url

Dashboard
1

I'm working on a v-data-table and would like to show a picture with a text field.
I know it is not a simple question because it will depend on my server setup, but I'm having trouble with getting the correct link to the picture:

image
image720×544 73.7 KB

This code is not showing the picture, as I expected:
image
image458×410 19.3 KB

2

Hi.

Firstly, please don't post pictures of code (it is not searchable, it is harder to read, and I cannot copy and fix up and paste back). Please use code blocks for code.


<img src="img\bean.jpg" />

I assume you have a directory named img and you were expecting that to be accessed in the browser? Fortunately that is not how serving assets work (you wouldn't want just any Tom, Dick or Harry accessing your files would you? :wink:) images have to be served from an endpoint before they can be accessed.

That said, you could base64 encode the image, store it as a data property and bind that to the :src attribute. Alternatively, just use one of the 10 material design coffee icons with a v-icon

3

Thanks Steve,

Next time I will not post a picture of the code, sorry for that :frowning:

Best regards