WordPress自定义插件图片不显示 如何正确调用插件内图片

核心问题点 #

• img标签的src属性未加引号包裹，HTML解析时路径识别错误，低容错的邮件客户端会直接忽略该属性
• wp_mail默认以纯文本格式发送邮件，所有HTML标签会被转义，无法渲染图片元素
• 未对生成的图片路径做安全转义，特殊字符可能导致属性值截断
• 若站点为本地环境无公网访问权限，外链图片无法被邮件客户端拉取加载

修正后完整代码 #

// 临时切换邮件发送格式为HTML
add_filter( 'wp_mail_content_type', function() {
    return 'text/html';
} );

// 拼接规范的邮件正文，给src属性加双引号，转义输出动态内容
$mail_content = sprintf(
    'the total attrition cost of the %s is %s%s <img src="%s" style="height: 100%; width: 100%; object-fit: contain" alt="logo">',
    esc_html($comName),
    esc_html($currency),
    esc_html($result),
    esc_url( plugins_url( 'assets/logo.png', __FILE__ ) )
);

wp_mail( $comEmail, $comName . " turnover cost result ", $mail_content );

// 移除临时格式过滤器，避免影响站点其他邮件的发送逻辑
remove_filter( 'wp_mail_content_type', function() {
    return 'text/html';
} );

校验步骤 #

• 先单独输出plugins_url( 'assets/logo.png', __FILE__ )的结果，在浏览器匿名窗口访问该路径，确认图片可以正常打开，排除目录名拼写错误（当前标注的插件目录名Turover-calculator和主文件名里的turnover存在拼写差异，需要确认实际目录名正确）
• 确保站点有公网访问能力，本地开发环境的图片地址无法被公网的邮件服务/客户端拉取，自然无法显示
• 如果需要更高的兼容性，可以将小尺寸logo转为base64编码直接嵌入img的src属性，避免邮件客户端拦截外链图片

内容的提问来源于stack exchange，提问作者jhayvon brutal