• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

255
Views
vue img no renderizará object.value de data()

lo siento si soy nuevo en vue y me fastidio. Estoy tratando de representar un img con un src que proviene de una propiedad de objeto que proviene de una matriz que devuelvo de data()

No recibo ningún error, pero no veo que aparezca ningún ícono, estoy usando otras imágenes del mismo directorio sin problemas, así que asumo que mi sintaxis es incorrecta. He validado que img src es correcto. No lo hago. No veo una forma diferente de hacer esto buscando en Google, así que espero que alguien tenga alguna idea para mí :)

Descubrí que recibo un error si uso

 v-bind:src="getImage(imagePath)"

Si hago esto, parece que vue busca el archivo pero devuelve un error en la consola que no puede encontrar el elemento, usé el archivo en otro lugar fuera del ciclo for y funcionó bien:/

mi consola también muestra el img src correctamente en el código fuente en render ingrese la descripción de la imagen aquí

modelo

 <!-- active agencies --> <b-tab title="Active" active><b-card-text> <ul class="pendingAgencyList"> <li v-for="agent in pendingAgency" :key="agent.Status"> <div v-if="agent.Status == 'active'" class="pendingAgencyItem"> <img :src="agent.Icon" :key="agent.Status" height="30px" width="30px"/> //ADDING IMAGE HERE <small>Name</small> <p>{{ agent.Name }}</p> </div> <div v-if="agent.Status == 'active'" class="pendingAgencyItem"> <small>Contact</small> <p>{{agent.Contact}}</p> </div> <p v-if="agent.Status == 'active'" >{{agent.Status}}</p> </li> </ul> </b-card-text></b-tab>

como referencia aquí hay una muestra de mis datos

 data() { return { pendingAgency:[ { Icon: '../assets/agency_logo-2.png', Name: "Moony Fox", Contact: "345-235-7685", Status: "pending" }, { Icon: '../assets/agency_logo-5.png', Name: "Bofy Fox", Contact: "345-235-7685", Status: "Rejected" }, { Icon: '../assets/agency_logo-3.png', Name: "Felony Mo", Contact: "345-235-7685", Status: "red" } ] } }
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Si puede intentar establecer datos como:

 { Icon: 'agency_logo-3', ... }

luego crea el método:

 methods: { getImage(img) { return require('../assets/' + img+ '.png'; } }

luego en el método de llamada de plantilla:

 <img :src="getImage(agent.Icon)" :key="agent.Status" height="30px" width="30px"/>
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error