My images are not being displayed

[Dr Strangegame]

Hi devs, if you can give me a hand, I would appreciate it.

I saved a cards sprite in my img folder, the same as what is here: https://github.com/elaskavaia/bga-heart ... /cards.jpg

However, when I play my game (the hearts tutorial), the images of the cards are not there. See attached screenshot



And when I use the browser "Inspect" feature, I see the url for the card image as follows: https://studio.boardgamearena.com:8083/ ... ards_1.png

But there is no picture that displays for that. When I play the original Hearts game, I can see the card Sprite images when I "Inspect" using the browser, and the URL is: https://studio.boardgamearena.com:8083/ ... ards_1.png

Does anyone know why that is the case?

[phoelis]

Hello,

Not sure maybe using an externalt url it's not working.

However i did the tuto 1 months ago and i did upload the picture on my "/img" folder. And upload it to the FTP "/img",

I just remember that i had also sometime to clear my browser cache to see some images. (but again all the img weres on my folder, not external urls like your example)

Hope it helps

[thoun]

Ho do you reference the image name on your CSS or JS ?

[AxeCrazy]

background-image: url("img/cards.jpg");

[Stanlah]

need to upload file, if you haven't

[Dr Strangegame]

Ho do you reference the image name on your CSS or JS ?

Hi, I followed these steps ( below) in the tutorial. I guess the confusing part is that it mentions the tpl file, when that refers to the js file, correct?



Now lets add a card into the hand, just so you can feel it. Edit .tpl and a playertablecard div inside a hand div

...
<div id="myhand">
<div class="playertablecard"></div>
</div>
...
Edit .css file

.playertablecard {
display: inline-block;
position: relative;
margin-top: 5px;
width: 72px;
height: 96px;
background-image: url('img/cards.jpg'); /* temp hack to see it */
}


I "think" that the js file should look like this after following the step above, correct?

document.getElementById('game_play_area').insertAdjacentHTML('beforeend', `
<div id="myhand_wrap" class="whiteblock">
<b id="myhand_label">${_('My hand')}</b>
<div id="myhand">
<div class="playertablecard"></div>
</div>
</div>

And my css looks like this:

.playertablecard {
display: inline-block;
position: relative;
margin-top: 5px;
width: 72px;
height: 96px;
background-image: url('img/cards.jpg'); /* temp hack to see it */
}

[thoun]

Yes, I probably forgot to remove one mention of tpl. Looks good so far, so I would check the file is present on the FTP folder with the exact same case.

[Dr Strangegame]

Thanks all for the help. In Visual Studio Code, I needed to right click on my img folder and select "Sync Local > Remote". After doing that, the images are appearing. Thanks for the assist!