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

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

CodePudding user response：

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="">

CodePudding user response：

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