1

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

Rodrigo Vergara
  • 35
  • 1
  • 4

2 Answers2

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="">
Nima Ebrazeh
  • 1,286
  • 3
  • 8
  • 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 – Rodrigo Vergara Sep 29 '21 at 16:06
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

Matvey Andreyev
  • 1,021
  • 10
  • 21