1

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

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

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

<img src="{image}" />

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

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

我想用简单的 CSS 规则来做这个而不使用 javascript。

我发现的一种解决方案是为图像提供 alt 属性，然后该文本为该元素提供 with 和 height 。

4

3 回答 3

3

您应该使用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 />

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

于 2013-08-02T13:15:28.767 回答
0

将元素上的widthandheight属性直接设置img为适当的占位符大小可能是要走的路。您也可以使用 CSS，即：

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

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

于 2013-08-02T13:08:28.993 回答
-1

用途width、height属性和背景。看样片

于 2013-08-02T13:07:07.770 回答