如何设置图像未加载时的img大小

我创建了一个自定义的wysiwyg编辑器，其中自定义变量是在保存内容后从PHP填充的。如何设置图像未加载时的img大小

例如{image}是一个占位符，它将在保存内容后从PHP填充。

在这种情况下，在HTML代码我的内容模板看起来像这样

<img src="{image}" />

由于这是某种拖放系统，我应该能够所见即所得的画布上拖动这个项目，但作为{image}占位符不能用javascript填充，浏览器将无法加载任何图像。据我所知，一些旧的Internet Explorer版本为这些img提供了一些默认的“图像破碎”图像，但现代浏览器根本不显示它。

那么有没有办法让这些卸载的图像可见（通过给出一些宽度和高度值以及一些魔法）？

我想使用简单的CSS规则做到这一点，而不使用JavaScript。

我找到的一种解决方法是给图像赋予alt属性，然后文本给出该元素的高度。

如果你给图像定义的宽度和高度，大多数浏览器将ST生病显示一个破碎的图像图标 –

但Firefox不。我需要通用解决方案。 –

您应该使用onerror ..所以图像将无法加载，但你可以显示一个“保存的图像”，以表明它会与他们的真实图像时公布更换终端用户..

<img src="{image}" onerror="this.src='http://www.mnit.ac.in/new/PortalProfile/images/faculty/noimage.jpg';" width="100" height="100" />

更改URL到你..所以像

<img src="{image}" onerror="this.src='/images/temp_image.jpg';" width="100" height="100 />

2013-08-02 13:15:28

谢谢，这看起来不错。你知道哪些浏览器支持错误事件吗？ –

根据quirksmode，当涉及到'img''src'属性时，几乎所有的东西都是：http://www.quirksmode.org/dom/events/error.html – Ennui

查看@Ennui提供的链接.. onerror将覆盖所有主流浏览器..除了Opera ..的惊喜（但谁仍然使用它？） –

你可以做，像这样

img.myimage{ 
width:200px!important; 
height:180px!important; 
}

2013-08-02 13:06:19

它在Firefox中不起作用，正如我为其他人所提及的。 –

然后添加！对高度和宽度重要 –

使用width，height性质和背景的CSS。看看sample

2013-08-02 13:07:07 YD1m

谢谢，但在Firefox 22中，这是行不通的。示例也不起作用。 –

@RolandSoós，用'display：block;'固定;' – YD1m

是的，Firefox在显示模块中似乎没问题。此外，@Danny Hearnah提出的onerror方法是一种更优雅的方式:) –

直接img元素一些微薄的占位尺寸上设置width和height属性可能是要走的路。你也可以做到这一点的CSS，即：

.wsyiwyg img { 
    width: 100px; 
    height: 100px; 
    background-color: #787878; 
    margin: 5px; 
}

，这可能是更好的另一个想法是用JS检查所有img元素和解析src属性，然后用一个占位符图像src更换任何与{image}格式（但保存原始数据并在保存/提交时切换）。

2013-08-02 13:08:28 Ennui

在Firefox 22中，CSS方法不起作用，目前我的alt方法似乎比使用JS更好。 –

在大多数情况下，直接设置'width'和'height'属性应该足够了。 Danny提出的“onerror”属性解决方案也是一种非常简单（并且很整洁）的方式来处理它。 – Ennui

回答