javascript - Gatsby - Javascript 替换来自 API 响应的图像 src

标签 javascript gatsby

我正在使用 Gatsby,blog_post.body 包含来自不同域的相对路径,例如:

API 网址:cms.drupal.com/api/blog/1 Gatsby 网址:localhost:8000/

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

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

最佳答案

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

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

像这样定义一个变量来保存 cms 站点的 url:

const cms = `cms.drupal.com`;

然后在渲染函数中做一个正则表达式来替换所有图像 src url。

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

然后

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

关于javascript - Gatsby - Javascript 替换来自 API 响应的图像 src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59413727/

相关文章:

javascript - Gatsby 在单击按钮时打开模态窗口

gatsby - 如何使用 Gatsby JS 处理国际化/本地化?

javascript - Gatsby Graphql 跳过

javascript - 如何从异步调用返回响应?

javascript - 条件逻辑jsx react

javascript - 如何通过一键删除按钮删除选中的项目

reactjs - 在 React.js 中渲染 favicon 的替代方法

php - 显示重定向 In.. CountDown Timer PHP

javascript - Bootstrap : Keeping content responsive when using an offcanvas sidebar

node.js - 如何使用 Gatsby 生成的页面作为主页?