Render SVG images with "?url" in an <img> tag
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="">
How to set up and validate locally
- Enable the feature flag: in your console
rails c
, and thenFeature.enable(:create_runner_workflow)
- Visit Admin -> CI/CD -> Runners
- Confirm the "New instance runner" button is available on the top-right corner
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #390786 (closed)