Tengo un proyecto en el que busco código HTML que puede incluir etiquetas img con el atributo src que necesito cambiar.

Ejemplo:

 <div class="WordSection1"> <p class="MsoNormal">Hej, <o:p></o:p></p> <p class="MsoNormal"> <tr> <img border="0" width="160" height="36" style="width:1.6666in;height:.375in" id="Bildobjekt_x0020_5" src="https://api-na1.hubspot.com/filemanager/api/v2/files/65389630830/signed-url-redirect?portalId=457458" alt="IPM Ulricehamn" data-file-id="65389630830" data-original-src="cid:image001.jpg@01D818D5.2CBCEFF0"> </tr> <tr style="height:7.5pt"> <td style="padding:0cm 0cm 0cm 0cm;height:7.5pt"></td> </tr> </div>

En mi código uso el html así:

 <p dangerouslySetHtml={{__html: HTML}} />

Necesito acceder a todas las etiquetas img en el código para cambiar el src debido a que las imágenes de la API de hubspot están bloqueadas detrás de la autenticación. Puedo autenticarme desde mi servidor y hacer que la imagen se cargue en otro host, pero necesito poder cambiar el src en todas las etiquetas img; de lo contrario, la img no es válida debido a la autenticación.

Estoy construyendo el proyecto en Next.JS