Gatsby JS - Использование SVG в качестве псевдо-фонового изображения в CSS - PullRequest
Новая
       18

Gatsby JS - Использование SVG в качестве псевдо-фонового изображения в CSS

1 голос
/ 13 июля 2020

Это то, над чем я играл некоторое время, но сейчас я нахожусь в той точке проекта, над которой я работаю в Gatsby, где мне нужен небольшой совет.

Я пытаюсь использовать SVG в качестве псевдофоновые изображения, но пока безрезультатно.

S CSS код: 

 &:after {
    display: block;
    content: "";
    position: absolute;
    background-image: url(../../static/square-hollow-yellow.svg);
    width: 150px;
    height: 150px;
    bottom: -5%;
    right: 50px;
  }

Что возвращается при поиске источника фонового изображения в инспекторе. 

url(data:image/svg+xml;base64,Ym9vawAAAABtYXJrAAAAADgAAAA4AAAAsAMAAAAABBAAAAAAVkcAABAHH+wVMcJBAAAAAP9/AADcAgAABAAAAAMDAAAABAAADAAAAAEBAABBcHBsaWNhdGlvbnMEAAAAAQEAAE1BTVAGAAAAAQEAAGh0ZG9jcwAACAAAAAEBAABhbmdlbC12MgoAAAABAQAAd3AtY29udGVudAAABgAAAAEBAAB0aGVtZXMAABQAAAABAQAAYW5nZWwtc3RhcnRlci1tYXN0ZXIGAAAAAQEAAGFzc2V0cwAABAAAAAEBAABzdmdzGAAAAAEBAABzcXVhcmUtaG9sbG93LXllbGxvdy5zdmcoAAAAAQYAABAAAAAkAAAAMAAAAEAAAABQAAAAZAAAAHQAAACQAAAAoAAAAKwAAAAIAAAABAMAAJ4xhQEDAAAACAAAAAQDAAD6RkABAwAAAAgAAAAEAwAAiEw3AAMAAAAIAAAABAMAACAHJQEDAAAACAAAAAQDAAArByUBAwAAAAgAAAAEAwAALAclAQMAAAAIAAAABAMAAOIZJQEDAAAACAAAAAQDAACO/qEBAwAAAAgAAAAEAwAAUgmiAQMAAAAIAAAABAMAAHAJogEDAAAAKAAAAAEGAAD8AAAADAEAABwBAAAsAQAAPAEAAEwBAABcAQAAbAEAAHwBAACMAQAACAAAAAAEAABBwg04Y7pOQRgAAAABAgAAAQAAAAAAAAAfAgAAAAAAAB8CAAAAAAAAAAAAAAEFAAAIAAAAAQkAAGZpbGU6Ly8vDAAAAAEBAABNYWNpbnRvc2ggSEQIAAAABAMAAACwYG50AAAACAAAAAAEAABBwb7mH7hbnSQAAAABAQAAQkQ3NDhGNkItMkM2NC0zOTZELUJENjMtRTcwNDRCMEM3MTZGGAAAAAECAACBAAAAAQAAAO8TAAABAAAA7xMAAAEAAAABAAAAAQEAAC8AAAAzAAAAAQIAAGRuaWIAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAHN2Zz8/Pz8AAAAAAAAAAADMAAAA/v///wEAAAAAAAAAEAAAAAQQAADMAAAAAAAAAAUQAACcAQAAAAAAABAQAADcAQAAAAAAAEAQAADMAQAAAAAAAAIgAACUAgAAAAAAAAUgAAAEAgAAAAAAABAgAAAUAgAAAAAAABEgAABIAgAAAAAAABIgAAAoAgAAAAAAABMgAAA4AgAAAAAAACAgAAB0AgAAAAAAADAgAAD8AQAAAAAAAAHQAAD8AQAAAAAAABDQAAAEAAAAAAAAABfwAACsAAAAAAAAACLwAACgAgAAAAAAAA==)

Любые указатели или советы будут очень благодарны.

ОБНОВЛЕНИЕ

Структура папок проекта 

- src
  - components
    - Heros 
      - hero-square.js (file of component)
    - sass
      - main.scss (stylesheet)
  - static
    - sqaure-hollow-yellow.svg (svg file)
  - templates
    - angel-in-action-single.js (where the component is being rendered/called)

Ответы [ 2 ]

2 голосов
/ 13 июля 2020

Вероятно, фоновое изображение просто не находится в видимой области ваших контейнеров. Трудно сказать только по предоставленному фрагменту. Тем более что ::after позиционируется абсолютно. 

div{
  background-color: red;
  height: 200px;
  position: relative;
  width: 200px
}

div::after{
    background-color: lime;
    display: block;
    content: "";
    position: absolute;
    background-image: url("https://image.flaticon.com/icons/svg/1643/1643587.svg");
    width: 150px;
    height: 150px;
    bottom: -5%;
    right: 50px;
    background-position: 50% 50%
  }
<div></div>

Также обратите внимание, что вы можете использовать background-size и background-position для размещения фона. Вам не требуется ::after только для этого. 

div{
  height: 200px;
  position: relative;
  width: 200px;
  
  background-image: url("https://image.flaticon.com/icons/svg/1643/1643587.svg");
  background-repeat: no-repeat;
  background-size: 100%
}

.div1{
  background-color: green;
}

.div2{
  background-color: lime;
  background-size: 150px;
  background-position: -50px -5%;
  background-repeat: no-repeat
}
<div class = "div1"></div>
<div class = "div2"></div>
1 голос
/ 13 июля 2020

Другой способ обхода - использование gatsby-plugin-react-svg. Настроить очень легко. Вам нужно позаботиться только о нескольких вещах, и вы легко сможете добиться того, чего хотите. В вашем gatsby-config. js: 

plugins: [
  {
    resolve: "gatsby-plugin-react-svg",
    options: {
      rule: {
        include: /assets/ 
      }
    }
  }
]

Имейте в виду, что /assets/ - это просто регулярное выражение, а не сам путь. Если вы хотите использовать другую папку (например, /svg/), вам нужно будет установить ее как include: /svg/. Неважно, насколько глубока ваша папка.

Еще одна вещь, которую нужно принять во внимание, - это иметь только SVG внутри этой папки, и у них должен быть другой id (обычно экспортируемый SVG имеет стандарт id и если они повторяются, у вас возникнут проблемы с импортом SVG).

После того, как вы подготовили свою настройку, просто импортируйте SVG как компонент React:

import Icon from "./path/assets/icon .svg "; // другой код 

return <div>
    <Icon className="myIcon" />
</div>;

Теперь вы можете настроить таргетинг на SVG и оформить его так, как вы sh. Если он находится внутри контейнера position: relative, вы можете легко применить стили предоставленного вами псевдоселектора ::after.

...