vue-elementui 图片显示，本地图片路径访问方式，表格里边显示图片，动态加载图片。vue样式里边引用assets里边的图片 电脑版发表于：2020/7/16 19:16 [TOC] ### vue-elementui 图片显示 ``` <el-image style="width: 32px; height: 32px" :src="src" :fit="fit" /> ``` 直接绑定一个地址即可：@表示src的路径，有时候路径太长这样使用方便一点 ``` const state = reactive({ previewUrl: "", //图片的地址。需要加上require函数，直接给地址是不行的 src: require("@/assets/fileimgs/jpg.png"), listLoading: true }) ``` 图片是本地的图片位置在：  **也可以在图片显示的时候直接给地址：** 但是要注意src前面也要写冒号，里边也要使用require方法不能直接给地址 ``` <el-image style="width: 32px; height: 32px" :src="require('../../assets/fileimgs/jpg.png')" :fit="fit" /> ``` 地址里边也可以使用@作为路径 ``` <el-image style="width: 32px; height: 32px" :src="require('@/assets/fileimgs/jpg.png')" :fit="fit" /> ``` **如果是图片地址是动态的在后面拼接就行了：** 注意不能把动态变量整体作为require里边的参数，require中不能直接用变量 ``` <el-image style="width: 32px; height: 32px" :src="require('../../assets/fileimgs/'+'pdf.png')" :fit="fit" /> ``` **img标签也是可以直接这样使用的** ``` <img :src="require('@/assets/imgs/labroom/'+titleImgs[rType])"> ``` 这里是根据不同的类型来显示不同的图片，图片类型数组的定义： ``` data() { return { titleImgs: { '0': 'course-video-1.png', '1': 'course-video-1.png', '2': 'rar.png', '3': 'course-exam-paper.png', '4': 'course-courseware.png', '5': 'course-exp.png' }, ``` **这样拼接方法也是可以的** ``` <img :src="require('@/assets/img/useData/' + parseImg(99))" class="tag_img" style="" alt="" /> ``` parseImg是一个方法： ``` parseImg(_pr) { if (_pr >= 90) { return "excellent.png"; } else if (_pr >= 80) { return "good.png"; } else if (_pr >= 70) { return "average.png"; } else { return "poor.png"; } }, ``` ### vue样式里边引用assets里边的图片 也不能直接给路径，要使用require函数，要拼接一下。最后编译出来地址是static的地址，应该直接把图片放到static直接给路径也是可以的 ``` <div :style="'background-image: url('+require('@/assets/imgs/labroom/backgroundimg/bacimg1.png')+')'" style="width: 177px;height:68px;background-size: cover;"/> ``` **方法二：写到样式文件里边** ``` .bgimg{ width: 60px; height: 60px; /*以下两种路径方式都可以*/ /*background-image: url('../../../../assets/images/logo.png');*/ background-image: url('~@/assets/images/logo.png'); background-size: cover } ``` **方法三：绑定的方式** ``` <div :style="{backgroundImage: 'url(' + imgData + ')' }"></div> ``` ``` <script> import logo from '@/assets/images/logo.png' export default { data() { return { imgData: logo } } } </script> ``` ### 表格里边显示图片 其实也是一个道理弄一个模板就行了 ``` <el-table-column label="图标" width="66" > <template #default="{ row }"> <div style="display: flex; align-items: center;text-align: center;"> <el-image style="width: 32px; height: 32px" :src="src" :fit="fit" /> </div> </template> </el-table-column> ``` **在表格里边加载动态图片** ``` <el-table-column label="图标" width="66"> <template #default="{ row }"> <div style="display: flex; align-items: center;text-align: center;"> <el-image style="width: 32px; height: 32px" :src="require('../../assets/fileimgs/'+row.fileTypeImg)" :fit="fit" /> </div> </template> </el-table-column> ```  图片路径也可以这样写： ``` <el-image style="width: 26px; height: 26px" :src="require('@/assets/img/analyseTrend/'+row.levelTypeImg)" /> ``` 效果如下：  ### 直接引用静态资源里边的图片 首先把图片放到根目录下的static文件夹里边  然后就可以直接使用了： ``` background: #f5f5f5 url('../../../static/img/chatimg/bg.jpg') no-repeat center; ``` 注意一下路径就行
