es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mostrando SVG sin procesar en React

02 Aug, 2023 Programación

Hola, estoy obteniendo un SVG de una API en esta forma:

<svg>.....</svg>

Estoy pasando este SVG como una propiedad a 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.

¿Alguna idea de cómo mostrar la imagen en su lugar? GRACIAS de ANTEMANO.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puede usar la prop dangerouslySetInnerHTML para renderizar la imagen SVG. Aquí te mostramos cómo puedes modificar el componente MainDisplay para mostrar la imagen:

    class MainDisplay extends React.Component {
  constructor(props) {
    super(props);
  }

  async componentDidMount() {}

  renderSvg(svg) {
    return { __html: svg };
  }

  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}" dangerouslysetinnerhtml="{this.renderSvg(Data.image_data)}"></div>
            ))}
          </div>
        ))}

    );
  }
}

    En este componente MainDisplay actualizado, creamos un método renderSvg que devuelve un objeto con la propiedad __html establecida en el código SVG. Luego, usamos la prop dangerouslySetInnerHTML para renderear el código SVG como HTML en lugar de texto. Esto debería mostrar la imagen SVG en lugar del código sin procesar.

Comments are closed.