UmbracoCMS 7.15.7用ImageProcessor转WebP遇404错误求解决

问题场景 #

基于Umbraco 7.15.7搭建的站点，按照教程配置ImageProcessor实现WebP格式转换，已完成以下操作：

• Nuget安装了ImageProcessor、ImageProcessor.Plugins.WebP、ImageProcessor.Web、ImageProcessor.Web.Config包
• 确认Format插件已启用
• 修改视图中GetCropUrl调用，添加format=webp参数
• 在Web.config中添加WebP的MIME类型

但浏览器请求图片时返回404，生成的图片URL仍保留原.jpg后缀，示例URL：

<img src="/media/37260/banner-web.jpg?anchor=center&amp;mode=crop&amp;width=1920&amp;height=640&amp;format=webp&amp;quality=80&amp;rnd=133270881000000000" class="img-responsive" alt="" width="1920" height="640">

根本原因分析 #

1. URL重写规则缺失：带参数的Media请求未被转发给ImageProcessor处理，IIS直接将其当作静态.jpg文件查找，自然返回404。
2. WebP插件未正确注册：ImageProcessor的配置文件中未添加WebP格式支持，无法识别并处理format=webp参数。
3. GetCropUrl参数传递不规范：使用furtherOptions拼接参数可能存在兼容性问题，未利用Umbraco内置的format参数支持。

解决方案 #

1. 配置ImageProcessor URL重写规则 #

在Web.config的<system.webServer><rewrite><rules>节点下添加或确认以下规则，确保Media路径的请求被ImageProcessor接管：

<rule name="ImageProcessor" stopProcessing="true">
  <match url="^(media)/.*" />
  <conditions logicalGrouping="MatchAll">
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
  </conditions>
  <action type="Rewrite" url="imageprocessor.ashx/{R:0}" />
</rule>

2. 注册WebP处理插件 #

打开~/config/imageprocessor/processing.config，添加WebP的插件和格式配置：

<processing>
  <plugins>
    <!-- 保留原有插件，新增以下行 -->
    <plugin name="WebP" type="ImageProcessor.Plugins.WebP.WebPPlugin, ImageProcessor.Plugins.WebP" enabled="true" />
  </plugins>
  <formats>
    <!-- 保留原有格式，新增以下行 -->
    <format name="webp" extension=".webp" />
  </formats>
</processing>

3. 修正GetCropUrl调用方式 #

Umbraco 7的GetCropUrl方法支持直接传入format参数，无需手动拼接：

@{ 
    var test = img.GetCropUrl(
        width: 1920, 
        height: 640, 
        quality: 80, 
        format: "webp"
    ); 
}

<img src="@test" class="img-responsive" alt="@item.GetPropertyValue("description")" width="1920" height="640">

4. 检查依赖库与权限 #

• 确认站点bin目录下存在libwebp.dll（对应服务器架构的版本），若缺失可重新安装ImageProcessor.Plugins.WebP NuGet包。
• 确保应用程序池身份对~/App_Data/cache和Media目录拥有读写权限，ImageProcessor需要生成缓存的WebP图片。

验证操作 #

完成配置后，重启站点，访问图片URL，此时ImageProcessor会生成WebP格式的缓存图片，浏览器应能正常加载。

内容的提问来源于stack exchange，提问作者Suong Liang