I'm currently working on a project using Vue, and I'm fetching an image through a Django REST API.
The code in table.vue file:
<tbody>
<tr v-for= "user in users" :key="user.id_users">
<th>{{user.id_users}}</th>
<td>{{user.name}}</td>
<td>{{user.username}}</td>
<td>{{user.profile}}</td>
<td>
<img
src='{{user.photo}}'
class="img-circle elevation-2"
alt="User Image"
width="60"
>
</td>
<td>{{user.status}}</td>
<td>{{user.last_login}}</td>
<td class="text-center">
<button
@click="modify=true; openModal(category)"
type="button"
class="edit btn btn-primary">
<i class = "fa fa-pencil-alt"></i>
</button>
</td>
<td class="text-center">
<button
@click="delete(category.id_category, category.category)"
type="button"
class="remove btn btn-danger"
data-toggle="modal"
data-target="#delete-modal"
>
<i class="fas fa-dumpster-fire"></i>
</button>
</td>
</tr>
</tbody>
This is the method used for fetching data:
async fetchUsers() {
const response = await axios.get('https://inventory-control-system.herokuapp.com/users/');
this.users = response.data;
},
The image link displayed as a result:
https://i.sstatic.net/TwKok.png
The actual URL that shows up when inspecting the photo element in the browser terminal:
https://i.sstatic.net/55g6Y.png
How can I correctly display the fetched images? Because when I use {{user.photo}} in the source attribute of the img tag, it doesn't work as expected.