2

Tengo un proyecto donde se me da un .svg para usar de background-image en un proyecto React. No sé si hay alguna manera de referenciarlo en la propiedad backgroundImage si lo convierto en un componente, o algo asi.

Mi idea seria una cosa asi:

 <div
  className={cssClasses}
   style={{
      backgroundImage: `url((acá el svg de alguna manera potable))`,
    }}
      >

Gracias!

1
  • ¿La imágen esta disponible en alguna carpeta del directorio de la app?, saludos
    – g.4
    Commented el 14 jun. 2021 a las 20:35

2 respuestas 2

2

Se puede usar concatenación de strings ES5:

style={{backgroundImage:"url(" + imagen + "})"

O se puede usar ES6 Template literals:

style={{backgroundImage:`url(${imagen})`

Demo Template Literals:

const imagen = " https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/800px-Unofficial_JavaScript_logo_2.svg.png"

function App() {
  return (
        <div style={{backgroundImage:`url(${imagen})`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        width:300,
        height:300}}></div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Espero que esta respuesta sea de ayuda.

0

Una posible solución seria utilizar el svg como data URI algo así:

Por favor observa que -a pesar de los cambios- el svg queda humanamente legible.

#svgbg{
height:200px;
width:200px; 
border:1px solid;
background-image:url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 26 26'%3E%0A%3Cpath d='M5,7a2,2 0 1 1 2,-2a2,2 0 0 0 4,0a2,2 0 0 1 4,0a2,2 0 0 0 4,0a2,2 0 1 1 2,2a2,2 0 0 0 0,4a2,2 0 0 1 0,4a2,2 0 0 0 0,4a2,2 0 1 1 -2,2a2,2 0 0 0 -4,0a2,2 0 0 1 -4,0a2,2 0 0 0 -4,0a2,2 0 1 1 -2,-2a2,2 0 0 0 0,-4a2,2 0 0 1 0,-4a2,2 0 0 0 0,-4z' fill='pink' stroke='black'%3E%3C/path%3E%0A%3C/svg%3E%0A");
}
<div id="svgbg"></div>

Por favor observa que:

< se transforma en %3C > se transforma en %3E

Por ejemplo vuelve a ser %3Csvg%3E

# se transforma en %23

Por ejemplo fill = "#abcdef" vuelve a ser fill = "%23abcdef"

el guión - se transforma en %2D

Por ejemplo stroke-width="2" vuelve a ser stroke%2Dwidth="2"

el símbolo matemático porcien % se transforma en %25

Por ejemplo width ='50%' vuelve a ser width ='50%25'

Puedes utilizar este URL-encoder for SVG o puedes leer como hacerlo aquí.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.