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 – 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) – Rohìt Jíndal May 09 '22 at 10:14

1 Answers1

0

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

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

vanarok
  • 5
  • 2