动态生成的css背景图像属性中的重音字符

Accented characters in a dynamically generated css background-image property

本文关键字:字符 属性 背景 css 动态 图像      更新时间:2023-09-26

我正在尝试为JSON对象中的每个成员动态生成缩略图网格。

每个成员都有一个"title"键和值,当加载网页时,会根据每个成员的标题生成一个URI。此URI成为backbone.js对象中的"img"属性,该对象用于要呈现的模板中。(请参阅底部的代码)。

我的问题是,其中一些标题有重音标记,当网站加载时,缩略图路径中的重音标记变为"x%CC%81",其中"x"是重音元音。这种情况只发生在我的Web服务器(Apache 2.2.6)上——当使用MAMP(我相信是Apache 2.2.26)在本地测试网站时,一切都很顺利。

我曾尝试在创建字符串路径时使用decodeURI(),但没有成功。因此,我认为这与服务器有关(因为它在MAMP中工作,但在我的Web服务器中不工作),但我想不出为什么。对我来说,更可能的罪魁祸首是CSS无法解析重音标记。

以下是backbone.js代码的片段,它为每个项目生成uri:

//For each model in the collection, generate the image uri, 
//where item.getHyphTitle() is the title that may contain accent marks
_.each(this.collection.models, function(item){
        item.set("img", decodeURI('../images/thumbs/' + item.getHyphTitle() + '-thumb.jpg'));
        renderContact(item);
 },this);

以下是使用的模板部分:

<div class="work-background" style="background-image:url('<%= img %>');"></div> 

我希望这是清楚的——问任何你可能需要澄清的问题。提前感谢你抽出时间来帮助我。

看起来可能有编码错误。一些操作系统支持您尝试做的事情(我认为OSX),而其他操作系统则不支持。这里有一个链接,指向关于这个问题的太多细节:

文件系统、Unicode和规范化