Enable option to use local images in markdown

[arbulu89]

We will want to add some images in markdown first/last pages to improve the information we want to provide the users.

Local images from /vendor/assets/images can be loaded like:

# Image in vendor/assets/images/local.png
![image]("asset_path=local.png")
# Or in html tags
<img src="asset_path=local.png" width="100" heigh="100">

Example:

[codecov[bot]]

Codecov Report

Merging #178 (b2baf6e) into master (f576eba) will decrease coverage by 0.15%. The diff coverage is 66.66%.

@@             Coverage Diff             @@
##            master     #178      +/-   ##
===========================================
- Coverage   100.00%   99.84%   -0.16%     
===========================================
  Files           24       24              
  Lines          659      661       +2     
===========================================
+ Hits           659      660       +1     
- Misses           0        1       +1     

Impacted Files	Coverage Δ
app/helpers/application_helper.rb	97.29% <66.66%> (-2.71%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update f576eba...1c68273. Read the comment docs.

[bear454]

While this may work in development, it's going to be a problem for sprockets (asset pipeline). Since we're enabling inline html, consider doing a base64 embed of the images directly in the img tag, e.g. https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html

[arbulu89]

While this may work in development, it's going to be a problem for sprockets (asset pipeline). Since we're enabling inline html, consider doing a base64 embed of the images directly in the img tag, e.g. https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html

Hey @bear454 , What do you mean that It will work in development? It wouldn't in production? I mean, the image is loaded in the same way as the first welcome page svg image, right?

What you say works, but it's quite uncomfortable to use it.

1. You need to get the base64 (it's not a big deal, it's just to run 1 command), but you have to do it
2. For normal images (not just some few pixels), the base64 string is super huge, and this makes the whole custom-en.yml super messy, more if we have multiple images.

If there is not any other way we might need to do it.

[bear454]

Sprockets processes each asset (image, JS bundle, CSS bundle), and produces a copy with an appended checksum. This is what is served in production (instead of dynamically processing the assets on each request). So, any assets need to (a) be in the sprockets load paths, and (b) use the sprockets helpers for referencing the name. Assuming you add an image vendor/assets/foo.png, it will not be loadable in production, without the checksum being appended. The only exception is content in the public/ directory.

[bear454]

So, I'd recommend (a) keeping images to only where absoulutely required, (b) using SVG (which can be inlined as well, as it's XML), (c) using raster graphics sparingly.

[arbulu89]

Superseded by https://github.com/SUSE-Enceladus/blue-horizon/pull/181