如果图像未加载，如何设置img大小

Question

我正在创建一个自定义的wysiwyg编辑器，其中包含自定义变量，这些变量在保存内容后从PHP中填充。

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

在这种情况下，HTML代码中的内容模板如下所示

<img src="{image}" />

由于这是一种拖放系统，我应该能够在wysiwyg画布上拖动这个项目，但由于{image}占位符不能用javascript填充，浏览器将无法加载任何图像。据我所知，一些旧的Internet Explorer版本将一些默认的“图像损坏”图像分配给那些img，但现代浏览器根本不显示它。

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

我想在不使用javascript的情况下使用简单的CSS规则来实现这一点。

我发现的一个解决方案是给图像赋予alt属性，然后该文本给出该元素的高度和高度。

Answer 1

您应该使用onerror ..因此图片无法加载，但您可以显示“保留图片”＃39;向最终用户展示在发布时它将被真实图像替换..

<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 />

示例：http://jsfiddle.net/7FtfX/

Answer 2

你可以用这样的css做到这一点

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

Answer 3

使用width，height属性和背景。看sample

Answer 4

直接在width元素上将height和img属性设置为适度的占位符大小可能是最佳选择。你也可以做CSS，即：

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

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