vue 图片复制黏贴上传_【第1845期】给破碎图片添加样式

前言

文章是16年的，对体验倒是挺好的一个方案。今日早读文章由@zhangbao90s翻译授权分享。

@zhangbao，有三年前端开发经验，目前在上海工作。当前着重于对前端基础技术的学习，活跃于掘金(@zhangbao90s)。平时会经常翻看和翻译国外的一些技术文章，希望跟大家一起进步。

正文从这开始～～

如果 的 src 属性值是一个无效地址，最终的渲染结果就很丑陋：

src="http://bitsofco.de/broken.jpg"alt="This image is broken! Ugly, isn’t it?">

我们看到的是一个破碎的图片(Broken Images)：

 元素上的两个事实

在理解给破碎图片添加样式的方式前，我们需要先学习 元素上存在的两个事实：

我们可以在 元素上使用常规的排版相关样式。这些样式会被应用到替换文本上(即 alt 属性值)，如果图片正常显示了，这些样式也不会影响图片的渲染。

元素是替换元素。这就表示“该类元素的外观和尺寸是受到外部资源控制的”(Sitepoint)。因为元素是受到外部资源控制的，因此 ::before、::after 伪元素的样式并不会影响图片渲染。然而，当图片因为地址无效或网络等原因加载失败后，伪元素就出现了。

正是基于上面的两个事实，才让我们为破碎图片设置样式成为可能。

撸代码

我们还是基于上面的无效图片地址，设置样式：

src="http://bitsofco.de/broken.jpg"alt="Kanye Laughing">

添加有用信息

当图片资源加载失败时，我们可以提供一些有用的信息展示给用户，让用户知晓发生了什么。这里要用到 attr() 功能函数，这样还可以把问题链接地址显示出来。

img {

font-family: 'Helvetica';

font-weight: 300;

line-height: 2;

text-align: center;

width: 100%;

height: auto;

display: block;

position: relative;

}

img:before {

content: "We're sorry, the image below is broken :(";

display: block;

margin-bottom: 10px;

}

img:after {

content: "(url: " attr(src) ")";

display: block;

font-size: 12px;

}

覆盖默认的替换文本

还有一种方案，就是伪元素绝对定位在替换文本之上，这样替换文本被遮住，我们就只能看到伪元素了。

img { /* 样式跟第一个例子里是一样的 */}

img:after {

content: "\f1c5"" " attr(alt);

font-size: 16px;

font-family: FontAwesome;

color: rgb(100, 100, 100);

display: block;

position: absolute;

z-index: 2;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #fff;

}

再进一步设置样式

除了可以显示默认的替换文本信息，我们还可以通过伪元素为破碎图片进一步添加更细腻的样式

img {

/* 样式跟第一个例子里是一样的，然后加了下面一个声明 */

min-height: 50px;

}

img:before {

content: " ";

display: block;

position: absolute;

top: -10px;

left: 0;

height: calc(100% + 10px);

width: 100%;

background-color: rgb(230, 230, 230);

border: 2px dotted rgb(200, 200, 200);

border-radius: 5px;

}

img:after {

content: "\f127"" Broken Image of " attr(alt);

display: block;

font-size: 16px;

font-style: normal;

font-family: FontAwesome;

color: rgb(100, 100, 100);

position: absolute;

top: 5px;

left: 0;

width: 100%;

text-align: center;

}

如果图片没有破裂，伪元素根本不会生成，图片还能正常显示。

src="/content/images/2016/02/Screen-Shot-2016-02-27-at-12-42-08.png"alt="Image not broken">

浏览器兼容性

不幸的是，并非所有浏览器都以相同的方式处理损坏的图片。对于某些浏览器，即使图片没有显示，伪元素也不会显示。

四年前的测试结果，现在应该会有所变化。

下面，是我的测试结果：

* 只有在图片的宽度足够大时，alt 文本才会显示出来。如果没有为   指定宽度，alt 文本可能根本就显示不出来。

** 设置的字体样式无效。

对于不支持伪元素的浏览器，所应用的样式将被忽略，因此不会造成破坏性干扰。这表示着我们仍然可以上面的样式方案，并在支持的浏览器上为用户提供更愉快的体验。

关于本文 译者：@zhangbao90s 译文：https://juejin.im/post/5e2fa68ae51d45580329be17 作者：@Ire Aderinokun 原文：https://bitsofco.de/styling-broken-images/

为你推荐

【第1444期】Vue: scoped 样式与 CSS Module 对比

【第1829期】复制黏贴上传图片和跨浏览器自动化测试

【第1815期】利用 JS 实现多种图片相似度算法