之前问过一次，今天又问了 Cursor 一个问题，记录一下。其实这些内容对于行家里手来说不值得一记，但俺是前端小白，就得记一下。
Q：在一个页面中需要展示一个图片，图片需要根据当前浏览器采用的语言而对应后端准备的不同资源，如何写最简单？
A：有几种简单的方法可以实现这个需求：
1. 使用 HTML 的 lang 属性和 CSS 选择器：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- 在 html 标签上设置语言 --> <html lang="zh"> <body> <img class="language-image" src="default.png" alt="图片"> </body> </html> <style> /* CSS 中根据语言选择不同图片 */ :lang(zh) .language-image { content: url('/images/zh.png'); } :lang(en) .language-image { content: url('/images/en.png'); } </style> |
2. 使用 JavaScript 检测浏览器语言：
|
1 2 3 4 5 6 7 |
<img id="languageImage" src="" alt="图片"> <script> const lang = navigator.language.slice(0, 2); // 获取语言代码前两位 const img = document.getElementById('languageImage'); img.src = `/images/${lang}.png`; </script> |
3. 使用 HTML 的 picture 元素：
|
1 2 3 4 5 |
<picture> <source srcset="zh.png" media="(lang: zh)"> <source srcset="en.png" media="(lang: en)"> <img src="default.png" alt="图片"> </picture> |
推荐使用第 2 种方法，因为它最简单直接，且兼容性最好。
顺便说一句，虽说咱是个菜鸟，但问它的时候，就是想让它帮着写出来第 2 种方法的代码的，:)