Skip to content

Render SVG images with "?url" in an <img> tag

Miguel Rincon requested to merge 390786-use-webpack-imports-for-logo-images-at-runner-platform-options into master

☝ Depends on !110694 (merged).

What does this MR do and why?

Render SVG images with "?path" in an <img> tag

How does this work?

Previously we always loaded all the svg files using the raw-loader which fetches the entire svg body to add it inline inside an our HTML. This a very flexible way to load them that has the advantage of allowing our client side code to manipulate the SVGs (such as adding styles).

However, this requires us to use v-safe-html to place the SVG inside our markup, and makes SVG images work differently from other like PNG and JPG.

This MR has our SVGs loaded as before by default, but allows us to opt-in by adding a ?path query at the end of the import so it can be loaded as any old image.

Screenshots or screen recordings

Logos are loaded using <img src="..."/> instead of <div v-safe-html="">

image

How to set up and validate locally

  1. Enable the feature flag: in your console rails c, and then Feature.enable(:create_runner_workflow)
  2. Visit Admin -> CI/CD -> Runners
  3. Confirm the "New instance runner" button is available on the top-right corner
  4. Select the button to go to the new page

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #390786 (closed)

Edited by Miguel Rincon

Merge request reports