div's background is different than it's content (same values passed)

Viewed 41

Ok, so I have a very strange problem (I'm using next.js).

I'm mapping shuffled array.

const otherPoepleData = shuffle(allPeople).filter(item => item.full_slug !== data.full_slug).slice(0, 3)
{otherPoepleData.map((item, index) =>
  <SpeakerNew data={item} key={item.id} index={index} />
)}

To sum up the problem I've put inside SpeakerNew component following code:

<div style={{ backgroundImage: `url(${image.filename})` }}>
  {image.filename}
</div>

And here are the results:

<div style="background-image: 
  url(https://something.com/blablaba57674676343zzx.png);">
      https://something.com/blablaba13123123dasdzz.png
</div>

The content of the div is 100% correct, however the backgroundImage url is incorrect. Taken from completely other person from array I'm mapping. What coulde be the problem here?

0 Answers
Related