Estoy tratando de obtener una instantánea del lienzo HTML así:
const canvas = canvasRef.current let image = canvas.toDataURL('image/jpeg'); await axios.post('/api/entries/', { dataURL: image })que parece estar funcionando y conectado correctamente a la base de datos.
Pero no puedo entender cómo usar dataURL para crear un componente de imagen en la interfaz de React
Puedo recuperarlos desde el backend sin problemas y registrar la URL de datos.
const pics = await axios.get('/api/entries/') pics.data.map((pic) => { console.log(pic.dataURL) })Supongo que no estoy seguro de los próximos pasos para convertir cada dataURL en un elemento
Aquí está mi función getPics:
const getPics = async () => { const pics = await axios.get('/api/entries/') return ( pics.data.map((pic) => ( <img src={pic.dataURL} key={pic.dataURL} /> )) ) }y se usa como:
<div> {getPics()} </div>Coloque las imágenes en un estado y coloque la búsqueda en una función useEffect() .
const [pic,setPics] = useState(); useEffect(() => { const getPics = async () => await axios.get('/api/entries/') .then(res => { setPics(res.data); }) getPics(); }, [])El mapeo es la forma correcta de hacerlo... al mapear, puede arrojar los datos en un elemento img, esto mostrará cada imagen en la página. el valor clave es para reaccionar para saber la diferencia entre cada elemento.
return ( {pics.data.map((pic) => ( <img src={pic.dataURL} key={pic.dataURL} /> ))} )