CODEWITHSUNDEEP
javascripthtmlcssasp.net-mvc
Fred James
Fred James

Reputation: 69

What is the best way to load an image dynamically without going back to the server?

I've got a very simple card game built in ASP-MVC.

One element of the game is the ability to pick a random card from a deck of 52.

I've got 52 svg's representing the deck and some JavaScript that generates a random number.

What I'd like to happen is when the user clicks the deck a random card pops up somewhere on the screen.

Code so far:

<div>
    <img src="~/images/poker/poker-deck.svg" onclick="pickCard()" />
</div>
<div>
    <img id="imgCard" alt="" />
</div>

<script type="text/javascript">

    function pickCard() {

        document.getElementById("imgCard").src = "images/poker/poker-" +   Math.floor(Math.random() * 52) + 1 + ".svg";
    }  

</script>

Unfortunately all that happens at the moment is a broken image icon gets displayed.

I'm assuming the image is still on the server not available to the browser hence why I get the broken link.

I don't want to go back to the server if I can help it. One thing I'm considering is loading all 52 cards into the page and using CSS to hide and show as appropriate.

Is there a better/simpler way to achieve the same result?

Additional Info:

Error from DevTools: 404 Not Found - http://localhost:59862/images/poker/poker-01.svg

Upvotes: 1

Views: 185

Answers (1)

SergGr
SergGr

Reputation: 23788

I think your diagnosis is wrong. I think that the reason of your issue is that you use ~ (tilde) as a part of the path. This is not a part of HTML-standard, this is a thing that is supported by IIS/ASP.NET (and some other web-servers). For browser you should actually put absolute or relative URL.

To check if I'm right just open your page in modern browser, open "dev tools" and see network request for images. I expect you get HTTP error 404 (Not Found) and thus "a broken image icon gets displayed". Just look at what URL the browser actually tries to open for the image.

Yes, you might push your images inside CSS using Data URI scheme but I don't think you really need this right now. Just put proper URL and it should work.

Upvotes: 1

Related Questions