How to set src of image dynamically from local json in vue js3

Question

My App.vue has a V-for to create a Card Component, this Card receives the data through a Prop. Everything works fine except for the image.

In my App.vue

<DevJobCard :Job="item" v-for="item in filterSearch" v-bind:key="item.id"/>

The urls that my json provides

"logo": "./assets/logos/scoot.svg",

At the moment the only solution I have found is to put the images in the static folder and use this code so that you can at least see it in production. Help me please :( I haven't made any progress in 2 days

<img v-on="check" :src="'/static' + Job.logo.substring(1)" alt="">

I would like to know how to make it work if they are in assets or in static

Nima Ebrazeh · Accepted Answer · 2021-09-29 14:16:10Z

2

If you want to load them by webpack you can simply use :src="require('path/to/file')". Try this code:

<img v-on="check" :src="require('/static' + Job.logo.substring(1))" alt="">

answered Sep 29, 2021 at 14:16

Nima Ebrazeh

1,3266 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rodrigo Vergara Over a year ago

I used your code adding "../" until reaching the path ": src =" require ('../../../ static' + Job.logo.substring (1)) "" Do you know if there is a way to reference the root path? so not full of "../", although it really is not a problem. Thank you very much, i was stuck for 2 days🤣

Matvey Andreyev · Accepted Answer · 2021-09-29 14:37:09Z

0

Your project is built, and image paths in the build can change after the build process.

You can try using the require() function. It works at build time:

// v-for="item in yourObject"
<img :src="require('./assets/logos/' + item.logo)" />

This way, webpack will know it needs to change the path to post-build one.

You may want to check this question out: https://stackoverflow.com/a/57350255/1722529

answered Sep 29, 2021 at 14:37

Matvey Andreyev

1,05610 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to set src of image dynamically from local json in vue js3

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related