如何使用Selenium WebDriver修改JS方法赋值的img标签src属性？

问题核心原因 #

你直接给src赋值原生本地路径（C:\...）无效，主要有两个关键点：

1. 浏览器无法识别Windows原生路径格式，必须使用浏览器可解析的URL规范（如file://协议或Data URI）；
2. 若页面基于Vue/React这类前端框架开发，DOM属性与框架状态绑定，直接修改DOM的src不会同步框架数据，导致视图无变化。

解决方案 #

1. 转换为file://协议路径 #

将本地路径转换为浏览器支持的file://格式，需完成3处转换：

• 反斜杠\替换为正斜杠/
• 空格替换为URL编码%20
• 前缀添加file:///（三个斜杠对应Windows盘符结构）

代码示例：

string localPath = @"C:\Uploading files\276090223\276090223.jpg";
// 转换为file协议URL
string fileUrl = "file:///" + localPath.Replace("\\", "/").Replace(" ", "%20");
string script = $"document.getElementById('img1').src = '{fileUrl}';";
((IJavaScriptExecutor)driver).ExecuteScript(script);

2. 使用Base64 Data URI（推荐） #

把本地图片编码为Base64格式的Data URI，直接赋值给src，这种方式不受浏览器本地文件安全限制，兼容性最强：

第一步：实现图片转Base64方法

public static string ImageToBase64(string imagePath)
{
    try
    {
        FileInfo imageFile = new FileInfo(imagePath);
        using (FileStream fs = imageFile.OpenRead())
        {
            byte[] bytes = new byte[fs.Length];
            fs.Read(bytes, 0, bytes.Length);
            return $"data:image/jpeg;base64,{Convert.ToBase64String(bytes)}";
        }
    }
    catch (IOException ex)
    {
        Console.WriteLine(ex.Message);
        return string.Empty;
    }
}

第二步：赋值给img的src

string base64Img = ImageToBase64(@"C:\Uploading files\276090223\276090223.jpg");
string script = $"document.getElementById('img1').src = '{base64Img}';";
((IJavaScriptExecutor)driver).ExecuteScript(script);

3. 前端框架场景的特殊处理 #

如果页面基于Vue/React开发，直接修改DOM属性不会触发视图更新，可通过两种方式解决：

• 找到框架绑定的数据源，直接修改对应状态（需了解页面框架逻辑）；
• 强制触发框架更新机制，比如Vue调用$forceUpdate()，React触发组件重渲染。

示例（Vue场景，假设img绑定的是imageUrl）：

// 执行该JS脚本
const vm = app._instance.root; // 假设页面根实例为app
vm.imageUrl = '{fileUrl或Base64字符串}';
vm.$forceUpdate();

4. 强制触发图片加载事件 #

部分页面会监听img的load事件做后续处理，修改src后可手动触发该事件：

string script = $"const img = document.getElementById('img1'); img.src = '{fileUrl}'; img.dispatchEvent(new Event('load'));";
((IJavaScriptExecutor)driver).ExecuteScript(script);

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