<template> <div> <div v-if="item"> <h1>Price: {{ item.email }}</h1> <v-if item.email=="john@gmail.com"> <img :src="../"/> </v-if> </div> </div> </template> <script> import { routerid } from "./routerid"; export default { name: "User", components: {}, data() { return { item: [], }; }, mounted() { this.loadData(); }, computed: { routeId() { return this.$route.params.id; }, }, watch: { routeId() { console.log("Reload (route change)"); this.loadData(); }, }, methods: { loadData() { console.log("Reloading, ID", this.routeId); if (!this.routeId) return; routerid(this.$route.params.id).then((item) => { this.item = item.data; }); }, }, }; </script>

¿Cómo cargar imágenes almacenadas localmente de forma condicional en Vuejs?

Tengo tres imágenes almacenadas dentro de mi carpeta de activos. como a continuación.

Ahora, en la interfaz, quiero llamarlos condicionalmente como, por ejemplo (si ---> john@gmail.com muestra la imagen de john almacenada dentro de la carpeta de activos. De lo contrario, no. De manera similar para otras imágenes también. Como Derk y Kate...

¿Necesito escribir si otra condición? ¿Para cargar las imágenes basadas en el correo electrónico? ¿O alguna otra forma de hacerlo?

Código:- https://codesandbox.io/s/combined-logic-api-forked-nzzzwc?file=/src/components/User.vue

Respuesta API: - https://fakestoreapi.com/users/1

{"dirección":{"geolocalización":{"lat":"-37.3159","long":"81.1496"},"ciudad":"kilcoole","calle":"carretera nueva","número": 7682,"código postal":"12926-3874"},"id":1,"correo electrónico":"john@gmail.com","nombre de usuario":"johnd","contraseña":"m38rmF$","nombre ":{"nombre":"juan","apellido":"doe"},"teléfono":"1-570-236-7033","__v":0}

Nota: el correo electrónico será diferente para cada identificación.