Ionic4通过WP-Json对接WordPress时ion-img无法加载图片

我之前帮朋友排查过类似的问题，结合你的代码和场景来看，问题基本锁定在All in One Security插件的安全限制和Ionic的图片加载机制上，给你整理了几个实用的解决步骤：

1. 先排查All in One Security的防盗链设置 #

这是最常见的原因，插件的防热链功能会阻止非授权网站加载你的图片：

• 登录WordPress后台，找到「WP Security > Firewall > Prevent Hotlinks」（防热链）选项
• 如果这个功能是开启状态，把你的Ionic应用域名（开发环境的话就是localhost:8100，生产环境换成你应用的正式域名）添加到允许列表里
• 可以先临时关闭防盗链功能测试一下，如果图片能正常显示，就确定是这个设置的问题了

2. 配置WordPress的CORS跨域规则 #

Ionic作为前端应用，跨域请求WordPress资源时可能被浏览器拦截，即使图片URL能在浏览器直接打开：

• 打开WordPress主题的functions.php文件，添加以下代码来允许跨域请求：

  add_action('init', 'allow_cors_for_ionic_app');
  function allow_cors_for_ionic_app() {
      // 开发环境可以用*，生产环境一定要替换成你的应用实际域名
      header("Access-Control-Allow-Origin: *");
      header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
      header("Access-Control-Allow-Headers: Content-Type");
  }
  

• 生产环境记得把*改成你的应用域名，比如https://your-ionic-app.com，避免安全风险

3. 检查图片URL的完整性 #

看你代码里的baseURL是domain.com，要确认这个地址带了http://或https://协议：

• 比如应该是https://domain.com，而不是单纯的domain.com，否则生成的图片URL会是相对路径，Ionic无法正确加载
• 可以在控制台打印post.featured_image的值，检查输出的URL是不是完整的带协议的地址

4. 测试替换ion-img为原生img标签 #

ion-img有自己的懒加载和缓存机制，有时候会和跨域资源冲突：

• 先把代码里的ion-img换成原生的<img>标签测试，如果图片能显示，说明是ion-img的加载机制需要调整
• 如果要继续用ion-img，确保开启了正确的CORS配置，同时可以尝试添加loading="lazy"或者调整ion-img的属性

5. 排查插件的其他安全规则 #

All in One Security的基础防火墙规则也可能拦截Ionic的请求：

• 进入「WP Security > Firewall > Basic Firewall Rules」，看看是否开启了「Block non-standard user agents」（阻止非标准用户代理）
• Ionic应用的请求User-Agent和浏览器不同，如果这个规则开启了，可能会被拦截，可以临时关闭测试，或者把Ionic的User-Agent加入白名单

按照上面的步骤逐一排查，应该就能解决图片不显示的问题了。核心原因就是All in One Security的安全限制阻止了Ionic应用的图片请求，或者跨域配置不正确导致图片资源无法被加载。

内容的提问来源于stack exchange，提问作者Sfwan Essam