0

Using Vue CLI

Hi, I'm currently updgrading a website with vue.js and everything works fine except for background images.

Inside one of the views, I have this code:

<div v-for="(member, i) in team" :style="{'background-image': `linear-gradient(-225deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, var(--end-opacity)) 50%),url(${require(getStyle(i))})`}" :key="i">
  <h2>{{member.name}}</h2>
  <p class="member-desc">{{text.about.members[i]}}</p>
</div>

I get background image url from a json file (image is stored in assets folder) and it looks like this : '@/assets/images/nicolas.jpg'. The "getStyle" function defined in methods looks like this :

getStyle (index) {
   return this.team[index].image
}

The problem is the website doesn't show images and returns GET http://localhost:8080/@/assets/images/nicolas.jpg error.

If I change urls to images stored on the web it works, but not locally. Is there any reason why?

Samuel Tandonnet
  • 1
  • 1
  • Hey, check this one: https://stackoverflow.com/a/60859696/2092969 – Vinicius Cainelli May 09 '22 at 09:09
  • @cainelli Thanks, but I already saw this and so the whole url is stored in the json file, not just a parameter. So I tried the answers from this question but they don't solve the issue – Samuel Tandonnet May 09 '22 at 09:20
  • Does this answer your question? [Vue dynamic background image inline component](https://stackoverflow.com/questions/60859602/vue-dynamic-background-image-inline-component) – Debug Diva May 09 '22 at 10:14

2 Answers2

0

http://localhost:8080/@/assets/images/nicolas.jpg

Your builder does not convert the "@" alias. Set up an alias.

ivan
  • 5
  • 1
  • 3
0

You may want to tweak the image url from the json file to:

src/assets/images/nicolas.jpg

I had the same problem where

../assets/images/

and

@/assets/images/

did not work, but specifying 'src' did. Also, in the inline html, instead of calling getStyle(index), how about putting the image url inline dynamically? Say, instead of

url(${require(getStyle(i))})

how about:

url(${ 'src/assets/images/' + member.image})
user19858571
  • 1
  • 2