使用React从Strapi获取图片无法展示、富文本插图失效问题求助

1. 接口请求参数修正 #

Strapi v4默认不会返回关联的媒体字段内容，需要主动添加populate参数拉取图片详情：

// 原错误请求（末尾多空格+无populate参数）
const {loading , error , data } = useFetch('http://localhost:1337/reviews/ ' + id)
// 修正后请求
const {loading , error , data } = useFetch(`http://localhost:1337/reviews/${id}?populate=*`)

如果仅需要拉取图片字段，也可以指定populate[image]=*减少返回数据体积。

2. 图片路径拼接修正 #

Strapi返回的单图字段路径存储在data.image.url下，默认格式为/uploads/xxx.jpg，拼接时避免重复添加斜杠：

const ApiUrl = 'http://localhost:1337'
// 拼接路径前做去重斜杠处理
const imgUrl = ApiUrl + data.image?.url.replace(/^\/+/, '/')
// 渲染
<img src={imgUrl} alt={data.naam} />

如果你的image字段设置为多图类型，需要取数组下标的url：data.image[0]?.url

3. 富文本插入图片失效修复 #

Strapi富文本编辑器中插入的图片默认是相对路径，渲染前需要统一替换为绝对路径：

// 假设富文本内容存储在data.content中
const formatRichText = (content) => {
  return content.replace(/src="\//g, `src="${ApiUrl}/`)
}
// 渲染富文本时使用处理后的内容
<div dangerouslySetInnerHTML={{__html: formatRichText(data.content)}} />

4. 权限校验 #

进入Strapi后台：设置→用户与权限插件→角色→public，确认upload插件的find、findOne权限已开启，否则匿名访问会返回403错误。

内容的提问来源于stack exchange，提问作者cendrick king