###
Vue 页面图片不显示的常见原因及解决方案
#### 使用
Element UI 的 Icon 图标在生产环境中不显示
当使用
Element框架中的Icon组件，在
开发环境正常工作但在打包后的生产环境中出现问题
时，通常是因为字体文件未能正确引入。为了修复这个问题，可以修改`utils
.js`文件来确保资源能够被正确加载[^1]。
```javascript
// utils
.js 修改前
import '
element-ui/lib/theme-chalk/index
.css';
// utils
.js 修改后
import '@/assets/css/
element-variables
.scss'; // 自定义样式变量覆盖默认设置
```
#### 加载本地静态资源失败
对于通过HTML `<img>`标签尝试
展示位于项目内部的图像却遇到空白的情况，这通常是由于Webpack配置导致的路径解析问题所引起的。原始代码试图直接引用相对路径下的静态资产，然而这种方式并不适用于构建过程。正确的做法应当利用
Vue CLI内置的功能处理这类情形：
```html
<!-- 错误 -->
<img src="/static/Trump
.jpg" class="image">
<!-- 正确 -->
<img :src="require('@/assets/images/Trump
.jpg')" alt="" />
```
上述修正不仅解决了静态资源链接失效的问题，还增强了应用的安全性和兼容性[^2]。
#### 动态绑定
图片路径
时需调用 `require()`
如果是在模板里动态地给多个元素分配不同的背景图或者图标，并且这些素材都存储于项目的公共资源目录之下，则应该记得每次读取它们之前都要先执行一次`require()`函数转换成模块请求形式。这样做可以让编译工具识别到依赖关系并将其纳入最终产物之中。
```html
<div v-for="(item, index) in images">
<img :key="index" :src="require(item
.path)" width="80" height="80"/>
</div>
<script>
export default {
data () {
return {
images: [
{ path: '
./ww
.png'},
{ path: '
./imc
.png'}
]
}
}
}
</script>
```
此方法有效避免了因缺少必要的导入而导致渲染出来的视图缺失预期的内容[^3]。
#### 实现多张
图片平滑过渡效果
考虑到用户体验方面的要求，有
时还需要考虑如何优雅地呈现一系列待下载完成才能展现全貌的画面集合。为此可以在
页面初始化阶段预先准备好
占位符图形作为临
时替代品直到实际的
数据全部获取完毕为止；与此同
时配合浏览器
开发者工具调整网络条件模拟较慢连接状态以便观察整个流程是否顺畅无阻[^4]。
```css
/* 骨架屏样式 */
.skeleton-image {
background-color: #eef;
border-radius: 4px;
}
.image-loaded
.skeleton-image {
display: none;
}
```
```html
<template>
<div>
<!--
占位符 -->
<span v-if="!isLoaded" class="skeleton-image"></span>
<!-- 真实内容 -->
<transition name="fade">
<img v-show="isLoaded"
@load="onImageLoad()"
:class="{ 'image-loaded': isLoaded }"
:src="imageUrl"
alt="">
</transition>
</div>
</template>
<script>
export default {
props: ['imageUrl'],
data(){
return{
isLoaded:false,
};
},
methods:{
onImageLoad(){
this
.isLoaded=true;
}
}
};
</script>
```
以上措施综合运用可以帮助解决大多数情况下
Vue应用程序中存在的
图片加载难题。
本文介绍了一种使用CSS样式设置页面空数据时显示占位图的方法，通过具体代码示例展示了如何定义.el-table__empty-text类来实现这一功能。
扫一扫
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
