Image

Custom Images

Content Security Policy

GitHub introduced a Content Security Policy feature which is now causing issues when trying to include a custom image, especially in Chrome.

Refused to load the image 'https://stylishthemes.github.io/GitHub-Dark/images/backgrounds/bg-tile1.png' because it violates the following Content Security Policy directive: "img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.githubusercontent.com *.gravatar.com *.wp.com".

Sometimes, that image hosted on the gh-pages loads, most times it does not.

Images hosted at other sites (e.g. Flickr, Photobucket) are not applied.

Adding a Custom Image

Here are some solutions that have been found to work

1. Point to an attached image

• Best solution! GitHub responded that this is a valid solution so that makes this the best & easiest method.

• Drag & drop your image into any issue comment textarea and the image will be uploaded to the GitHub cloud.

• Copy the URL in the resulting markdown into the image URL.

• Here is an example: I uploaded an image and when it finished processing, it provided me with this markdown:

  ![bg-fabric1](https://cloud.githubusercontent.com/assets/136959/4104676/3c935fd4-3194-11e4-9346-44d3fad0d65d.png)

  extract out the above url and use it as your image.

• This may not be is the best method to use since it's kind of cheating, but if you attach an image to an issue, it will be loaded to the GitHub cloud.

2. Inline your image

• Convert your image into a data-uri - First use tinyPNG to optimize the file, then use a site like this one to convert the image into a data-uri (base64 encode).
• This is great if the image is small, but please be aware that Stylish does have a size limit which this style is very quickly approaching (see contributing.md for more details).
• When using userstyles.org to update the style, select "Upload your own" image. This automatically converts your image into a base64 encode and adds it to the style. Using this method does not appear to cause a problem with the size limitation.

3. Point to an image hosted at GitHub... it appears that only images hosted at raw.githubusercontent.com will work

The Future

@silverwind has opened an issue to hopefully allow pointing to images hosted at github.io so we can more easily point to gh-pages hosted images (ref).

I have contacted GitHub about this problem, hopefully we can find a solution.

Update

• Option 1 above, using GitHub's cloud, is a valid solution.
• GitHub will not include github.io on their list.