【 vue + js 】引入图片、base64 编译显示图片

一、引入普通图片

1、代码示例:

javascript 复制代码
<div class="question">
    <!-- 错误写法 -->
    <el-empty image="../assets/noinformation.svg" description="暂无问卷">
      <el-button type="primary">按钮</el-button>
    </el-empty>
    
    <!-- 正确写法 一定要注意image属性是有:的,不然图片无法显示-->
    <el-empty :image="require('../assets/noinformation.svg')" description="暂无问卷">
      <el-button type="primary">按钮</el-button>
    </el-empty>
</div>

2、参考链接:

el-empty Empty 空状态 自定义图片 使用本地图片_el-empty 自定义图片-CSDN博客

二、base64 编译显示图片

1、代码示例:

拼接前缀, 分别是 data:图片类型编码类型 data字符串数据

2、拓展说明:

  1. 图片以流的形式写到页面显示:图片的字节数组通过base64编译后返回前端
  2. 前端拿到这个data字符串后,先拼接前缀:分别是data:图片类型;编码类型,data字符串数据
  3. 前端显示图片的两种方式:css方式、img标签方式

3、 参考链接:

base64编码显示图片_别逼逼!出马吧!的博客-CSDN博客_base64图片显示
相关推荐
beckyye10 小时前
给web增加简单的ai对话功能
前端·ai·通义千问·qwen
青衫码上行10 小时前
【Java Web学习 | 第1篇】前端 - HTML
java·前端·学习
元直数字电路验证10 小时前
HTML 标签及推荐嵌套结构
前端·javascript·html
charlie11451419110 小时前
HTML 理论笔记
开发语言·前端·笔记·学习·html·1024程序员节
刚子编程10 小时前
ASP.NET Core Blazor 路由配置和导航
服务器·javascript·.netcore·blazor
海鸥两三10 小时前
Uni-App(Vue3 + TypeScript)项目结构详解 ------ 以 Lighting-UniApp 为例,提供源代码
vue.js·typescript·uni-app·1024程序员节
知识分享小能手10 小时前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
阿金要当大魔王~~10 小时前
uniapp img 动态渲染 的几种用法
java·服务器·前端·1024程序员节
知识分享小能手10 小时前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
one.dream10 小时前
用webpack 插件实现 img 图片的懒加载
前端·webpack·node.js