样式化加载失败的图片

本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动,望读者见谅

加载失败的图片是比较丑陋的,比如
我很丑陋,不是吗?

但是我们可以让结果变得更美好。通过给元素设置CSS相关属性可以实现更美的呈现。

IMG元素你需要知道的两点知识

  1. 我们可以针对IMG元素设置排版相关的CSS样式(诸如font等属性)。一旦IMG的可替换文本(即alt属性)出现,则设置的CSS样式应用于这些文本;
  2. IMG元素属于可替换元素(可替换元素是指元素的外观和大小受外部源所影响,常见的可替换元素如IMG,OBJECT,INPUT,TEXTAREA等)。正由于可替换元素收外部源的影响,因此CSS中的伪元素::before、::after对它不起作用。但是,一旦图片加载失败,伪元素就可作用于图片之上

理解了上述两点,我们就可以用CSS实现一个特殊的功能:

当图片正常加载时无需处理,而当加载失败时让图片应用一些特殊的样式,以达到更好的用户体验效果。

实践

采用如下的实例代码:

<img src="http://nopic.jpg" alt="休要胡说"> 

休要胡说

添加CSS样式

一旦图片加载失败,我们需要向用户提供相关文案,这就用到了CSS的attr函数

实例结果1

示例代码:

img {
            font-family: 'STKaiti';
            font-weight: 300;
            line-height: 2;
            text-align: center;

            width: 100%;
            height: auto;
            display: block;
            position: relative;
        }

        img:before {
            content: "抱歉,图片加载失败 :(";
            display: block;
            margin-bottom: 10px;
        }

        img:after {
            content: "(url: " attr(src) ")";
            display: block;
            font-size: 12px;
        }

替换alt文本

为了让加载失败的图片呈现更为美观,采用伪元素来进行绝对定位,更自由的控制表现。

结果2

img { /* Same as first example */ }

img:after {
            content: "\f1c5" " " attr(alt);
            font-size: 16px;
            font-family: FontAwesome;
            color: rgb(100, 100, 100);
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ddd;
        }

添加额外的样式

利用伪元素可以添加更多的额外样式:
111

img {  
  /* Same as first example */
  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;
}

正如第二节所说,如果图片正常加载,那么伪元素中设置的所有样式都不会被作用,因此这种方式作为一种backup,是非常有效的。

兼容性

不幸的是不是所有的浏览器都会这样处理应用在IMG元素上的伪元素。这是我整理的兼容性表格:
兼容性表格

* alt文本自由在图片的宽度足够容纳下它时才会显示,如果图片没有宽度,alt文本压根不会显示

** 字体样式不会起作用

译者注:
其实,针对IMG元素设置伪元素是非常好的一种backup方案,即使针对某些不支持该特性的浏览器而言也是没有副作用。因此在通常针对IMG元素使用base64占位符的实现下,尝试另外一种风格的实现也未尝不可。这样不仅仅减少了许多代码量,而且保证了全站图片加载失败所呈现的一致性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 Vue 中实现图片上传进度样式,可以使用第三方库 `vue-upload-component`。使用该组件可以方便地实现图片上传,并且支持显示上传进度。 首先,安装 `vue-upload-component`: ```bash npm install vue-upload-component --save ``` 然后,在需要上传图片的组件中,引入 `vue-upload-component`: ```vue <template> <div> <vue-upload-component ref="upload" :url="uploadUrl" @progress="onUploadProgress" @uploaded="onUploadComplete" > <button>Select Files</button> </vue-upload-component> <div v-if="uploadProgress !== null"> <div>Upload Progress: {{ uploadProgress }}</div> <div class="progress-bar"> <div class="progress" :style="{ width: uploadProgress + '%' }"></div> </div> </div> </div> </template> <script> import VueUploadComponent from 'vue-upload-component'; export default { components: { VueUploadComponent, }, data() { return { uploadUrl: 'your-upload-url', uploadProgress: null, }; }, methods: { onUploadProgress(progress) { this.uploadProgress = parseInt(progress.percent); }, onUploadComplete(response) { console.log(response); }, }, }; </script> <style> .progress-bar { width: 100%; height: 10px; background-color: #f5f5f5; } .progress { height: 10px; background-color: #5cb85c; } </style> ``` 在上面的代码中,`vue-upload-component` 组件的 `url` 属性设置为上传图片的接口地址,`@progress` 监听上传进度的事件,`@uploaded` 监听上传完成的事件。当上传进度改变时,会调用 `onUploadProgress` 方法更新进度条的样式,当上传完成时,会调用 `onUploadComplete` 方法处理上传结果。 为了显示上传进度,需要在模板中添加一个进度条。当 `uploadProgress` 不为 `null` 时,显示进度条和进度百分比。进度条的样式可以自定义,上面给出了一个简单的样式示例。 需要注意的是,为了安全起见,上传图片的接口地址应该使用 HTTPS 协议,并且需要在服务器端对上传的图片进行验证和处理。 ### 回答2: Vue 图片上传进度样式可以通过使用组件和样式来实现。以下是一个简单的示例: 首先,我们需要安装 `vue-axios` 和 `vue-progressbar` 这两个库来处理上传和进度条的功能。 ```bash npm install vue-axios vue-progressbar ``` 然后我们在 Vue 组件中引入这两个库并将其注册为全局组件。 ```javascript import VueAxios from 'vue-axios' import VueProgressBar from 'vue-progressbar' Vue.use(VueAxios, axios) Vue.use(VueProgressBar) ``` 接下来,在组件的模板中,我们可以使用 `vue-progress-bar` 组件来显示上传进度条。 ```html <template> <div> <input type="file" @change="uploadImage" /> <vue-progress-bar :progress="progress" :options="options"></vue-progress-bar> </div> </template> ``` 然后,在组件的方法中,我们需要处理上传图片的逻辑并更新进度条。 ```javascript export default { data() { return { progress: 0, // 上传进度 options: { color: '#2ecc71', // 进度条颜色 failedColor: '#e74c3c', // 上传失败时的颜色 thickness: '4px' // 进度条的厚度 } } }, methods: { uploadImage(event) { const file = event.target.files[0] const formData = new FormData() formData.append('image', file) axios.post('/upload', formData, { onUploadProgress: progressEvent => { this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total) if (this.progress === 100) { setTimeout(() => { this.progress = 0 // 上传完成后将进度重置为0 }, 2000) } } }) } } } ``` 通过上述代码,我们可以实现一个简单的图片上传进度样式。当我们选择一个文件并开始上传时,进度条会显示上传进度。上传完成后,进度条会在2秒后重置为0,准备下一次上传。 以上就是Vue图片上传进度样式的基本实现方法。通过使用适当的组件和样式,我们可以实现更漂亮和个性的上传进度样式。具体效果和样式可以根据实际需求进行调整和修改。 ### 回答3: 在Vue中实现图片上传进度样式可以通过以下步骤进行操作: 1. 在Vue中,可以使用axios库或者其他适合的第三方库来实现图片上传功能。在上传过程中,通常会提供上传进度的回调函数。 2. 首先,我们需要在Vue组件中创建一个data属性,用来保存上传进度的百分比,例如:percent。 ```javascript data() { return { percent: 0 } } ``` 3. 在上传图片的方法中,通过上传进度的回调函数来更新percent属性的值,从而实现实时更新上传进度的功能。例如使用axios库的例子: ```javascript methods: { handleUpload(file) { let formData = new FormData() formData.append('file', file) axios.post('/upload', formData, { onUploadProgress: progressEvent => { this.percent = Math.round(progressEvent.loaded / progressEvent.total * 100) } }).then(response => { // 上传成功的处理 }).catch(error => { // 上传失败的处理 }) } } ``` 4. 在Vue模板中,可以根据percent的值显示上传进度的样式。例如使用Bootstrap的进度条组件: ```html <template> <div> <input type="file" @change="handleUpload($event.target.files[0])"> <div class="progress"> <div class="progress-bar" role="progressbar" :style="{ width: percent + '%' }" aria-valuenow="percent" aria-valuemin="0" aria-valuemax="100"> {{ percent }}% </div> </div> </div> </template> ``` 这样就实现了一个简单的图片上传进度样式,当图片开始上传时,进度条会实时更新显示上传进度的百分比。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值