Gatsby - Javascript替换API响应中的图像源

Question

我使用的是Gatsby，blog_post.body包含来自不同域的相对路径，例如：

接口url: cms.drapal.com/ API /blog/1 Gatsby url: localhost:8000/

我想将src从<img src="/files/images/image.jpg />替换为<img src="cms.drupal.com/files/images/image.jpg />。

<div dangerouslySetInnerHTML={{__html: this.state.blog_post.body}} />

Answer 1

正确的解决方案是将域名添加到Drupal上的图像url中。

否则，如果你想在客户端处理它，你可以这样做：

定义一个变量来保存cms站点的url，如下所示：

const cms = `cms.drupal.com`;

然后在render函数中执行正则表达式来替换所有图像src urls。

const body = this.state.blog_post.body.replace(/src="\//g, `src="${cms}/`);

然后

<div dangerouslySetInnerHTML={{__html: body }} />