Failure to render in CodeSandbox

[cfjedimaster]

Let me be clear that I think this is 100% not your fault, but on the off chance it is a bug on this side, or something that can be adjusted, I thought I'd file it. I know it isn't your job to support an online editor, but again I figured it couldn't hurt to mention it. :)

So long story short, the component doesn't work in Code Sandbox. You can see my code here:

https://codesandbox.io/s/vue-template-tn6p7?fontsize=14

I see nothing in the logs, nor the console. However, the same code, exported and ran locally on my machine, works fine.

Again, feel free to close, but if it's a small thing that could be addressed, I thought I'd share. Thank you for reading!

[ubaldop]

Hi @cfjedimaster and thanks for pointing that out! I'll take a look as soon as I can to check if the issue you're mentioning is on the component side. 😸

[ubaldop]

Hi @cfjedimaster, I spent some time checking the issue. It seems that codesandbox does not import the flags.png (that's the image containing all the flags) properly (see https://tn6p7.codesandbox.io/flags.png).

Maybe, as alternative, I might embed flags.png directly as a Base64 encoded string in the CSS file of the component.

What do you think?

[cfjedimaster]

Honestly I don't know. My first instinct is - as I said above - is to focus on what is best for your component, and not worry about tools like CodeSandbox, but if this change would provide other benefits, then sure. The only possible benefit I can think of is one less network request, right? Technically it would be "kinda" better?

[ubaldop]

@cfjedimaster yes, altough the size of the component could slightly increase. However I'll give it a try, thank you for pointing the issue 😄

[ubaldop]

@cfjedimaster I've just updated the component, embedding the CSS background as Base64 encoded.

Now it renders also on Codesandbox (see https://codesandbox.io/s/tygv4).

Also, I took the chance to compress the size of the background image.

From 1.2.2 version the size of vue-country-flag is decreased (50% less!).

Wrapping up, thank you for pointing this issue 😄

[cfjedimaster]

Cool. FYI I blogged about your component here: https://www.raymondcamden.com/2019/06/21/vue-components-ftw-vue-country-flag

[ubaldop]

@cfjedimaster Cool, thanks for mentioning this component in your blog 🤓