Hola, estoy obteniendo un SVG de una API de esta forma:
<svg> ..... </svg>Estoy pasando este svg como accesorios para este componente MainDisplay
class MainDispay extends React.Component { constructor(props) { donothing(props); super(props); console.log("props", this.props.Collections); } async componentDidMount() {} render() { return ( <> {this.props.Collections.map((DataObj, i) => ( <div key={i}> <div>{DataObj.name}</div> {this.props.Collections[i].DisplayProps.map((Data, j) => ( <div key={j}>{Data.image_data}</div> ))} </div> ))} </> ); } } El único problema es que Data.image_data muestra <svg>.....<svg> en lugar de una imagen.
Cualquier idea de cómo mostrar la imagen en su lugar. Gracias de antemano
Puede usar Reacts dangerouslySetInnerHTML SetInnerHTML para representar cualquier cadena html proporcionada:
<div key={j} dangerouslySetInnerHTML={{__html: Data.image_data}} /> ¡Ten cuidado! Este atributo abre su aplicación para ataques vulnerables de secuencias de comandos entre sitios. Asegúrese de desinfectar su image_data para eliminar cualquier html que no sea svg . Más sobre esto, por ejemplo, en esta respuesta: https://stackoverflow.com/a/1637573/9969672
Una forma efectiva es pasar SVG como fuente de la etiqueta 'img'.
<img key={j} src={Data.image_data} />