如何解决Ionic应用中WordPress帖子图片无法正常渲染的问题？

嘿，我来帮你搞定这个WordPress帖子图片不显示的问题！我之前也碰到过类似的情况，WordPress API返回的内容里图片路径经常会有各种小坑，咱们一步步排查解决：

WordPress有时候返回的图片是相对路径（比如/wp-content/uploads/2024/05/post-image.jpg），而Ionic应用运行在本地WebView里，直接用相对路径肯定找不到资源。你可以先在代码里console.log(selectedItem.content.rendered)，看看输出的HTML里<img>标签的src是不是以http://或https://开头的完整路径。

如果是相对路径，推荐写一个Angular管道（Pipe）来批量替换路径：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'wpImagePathFix' })
export class WpImagePathFixPipe implements PipeTransform {
  transform(content: string): string {
    // 替换成你的WordPress站点完整域名
    const wpSiteUrl = 'https://your-wordpress-site.com';
    // 替换所有相对路径的图片src
    return content.replace(/src="\/wp-content/g, `src="${wpSiteUrl}/wp-content`);
  }
}

然后在模板里用上这个管道：

<p [innerHTML]="selectedItem.content.rendered | wpImagePathFix" text-justify></p>

如果是在浏览器里调试Ionic应用时图片不显示，大概率是WordPress服务器没配置CORS规则，导致浏览器拦截了跨域图片请求。你可以：

• 给WordPress安装一个CORS插件（比如WP CORS）快速解决；
• 或者手动在主题的functions.php里添加代码：

add_action('init', function() {
  // 生产环境建议替换成你的Ionic应用域名，不要用*
  header("Access-Control-Allow-Origin: *");
  header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
  header("Access-Control-Allow-Headers: Content-Type");
});

如果是打包成Android/iOS应用后图片不显示，要检查config.xml里的WebView权限配置：

• 确保存在允许访问外部资源的配置：<access origin="https://your-wordpress-site.com/*" />（或者用*允许所有，生产环境不推荐）；
• 添加导航权限：<allow-navigation href="https://your-wordpress-site.com/*" />；
• 针对Android，还可以添加：

<preference name="AndroidInsecureFileModeEnabled" value="true" />

如果上面的步骤都试过还是不行，直接复制<img>标签里的src链接，在浏览器里打开看看能不能正常显示。如果打不开，那就是WordPress那边的问题：要么图片被删除了，要么文件权限设置错误，需要去WordPress后台检查图片状态和服务器文件权限。

内容的提问来源于stack exchange，提问作者Anurag-Sharma