本文解决 vue.js 前端向 flask 后端发起搜索请求后，在 windows chrome 中正常显示图文结果，但在 android chrome、opera、edge 等浏览器中图片丢失（仅 firefox 正常）的问题，核心原因是字符串匹配未统一大小写导致移动端浏览器匹配失败。
本文解决 vue.js 前端向 flask 后端发起搜索请求后，在 windows chrome 中正常显示图文结果，但在 android chrome、opera、edge 等浏览器中图片丢失（仅 firefox 正常）的问题，核心原因是字符串匹配未统一大小写导致移动端浏览器匹配失败。
在 Vue.js + Flask 的文档搜索应用中，前端通过 URL 查询参数（如 ?q=keyword）触发后端检索 .docx 文件，后端解析文档内容并提取包含关键词的段落及内嵌图片。问题表现为：Windows 版 Chrome 能完整渲染文本和图片，而 Android Chrome、Edge、Opera 却只显示文本、图片全部缺失——但 Firefox 在所有平台均正常。
根本原因并非网络兼容性、CORS 或路径错误，而是后端 extract_content() 函数中关键词匹配逻辑存在隐式大小写敏感缺陷：
# ❌ 原始代码（问题所在）
if id_str in text: # 字符串包含判断未标准化大小写
is_collecting = True
不同浏览器对 JavaScript 字符串处理或 HTTP 请求头无直接影响，但此处的关键在于：Flask 接收的 query 参数（id_str）与 .docx 文档中实际文本（text）的大小写可能不一致。Windows Chrome 下测试时，文档文本与查询词恰好大小写匹配（如均为小写），而 Android 设备上用户输入更易混用大小写（如首字母大写），导致 id_str in text 判断失败，is_collecting = False 永远不被置为 True，进而跳过后续图片提取逻辑。
✅ 正确做法是在匹配前统一转为小写（或大写）进行比较：
def extract_content(doc_path, id_str):
doc = Document(doc_path)
extracted_data = []
image_directory = r"C:/Users/ID/Desktop/vue.jsExample/Vue-3/MaidsPost/public/static/extracted_images"
os.makedirs(image_directory, exist_ok=True)
is_collecting = False
# ✅ 关键修复：统一转小写进行匹配
id_str_lower = id_str.lower()
for para in doc.paragraphs:
text = para.text.strip()
text_lower = text.lower() # 统一转换
if id_str_lower in text_lower:
is_collecting = True
elif "extracted_time: " in text and is_collecting:
is_collecting = False
if is_collecting and text: # 避免空段落干扰
extracted_data.append({'type': 'text', 'content': text})
# ✅ 图片提取也需在 is_collecting 为 True 时执行
if is_collecting:
for run in para.runs:
for shape in run.element.iter():
if shape.tag.endswith('blip'):
try:
image_rid = shape.attrib['{http://schemas.openxmlformats.org/officeDocument/2006/relationships}embed']
image_part = doc.part.related_parts[image_rid]
image_filename = f"extracted_image_{uuid.uuid4()}.png"
image_path = os.path.join(image_directory, image_filename)
with open(image_path, 'wb') as f:
f.write(image_part.blob)
extracted_data.append({'type': 'image', 'content': image_filename})
except (KeyError, AttributeError, OSError) as e:
print(f"Image extraction failed: {e}")
continue
return extracted_data
⚠️ 注意事项：
- 永远避免裸字符串 in 匹配而不做大小写归一化，尤其在用户输入场景；
- 移动端浏览器（尤其是 Chromium 内核）对 JS 执行环境更严格，但本例问题实为 Python 后端逻辑缺陷，与前端无关；
- 前端无需修改 Axios 请求逻辑，但建议在 fetchSearchResults 中添加加载状态与空结果提示，提升体验；
- 图片路径 /static/extracted_images/xxx.png 需确保 Flask 静态文件路由正确配置（如 app.static_folder = 'public/static'），且 Android Chrome 对本地路径无特殊限制（因是服务端返回的相对 URL）；
- 开发阶段可加日志验证：print(f"[DEBUG] Matching '{id_str_lower}' in '{text_lower}': {id_str_lower in text_lower}")。
总结：跨浏览器行为差异常被误判为前端兼容性问题，但本例本质是后端字符串匹配逻辑鲁棒性不足。通过强制统一大小写，即可彻底解决 Android 端图片丢失问题，同时提升整体搜索可靠性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
