require import
这里写自定义目录标题
- require 引入图片
- base64:
- 通过require引入静态图片路径的解释
- 经验
require 引入图片
base64:
小图片(logo)建议转成 bese64 格式,因为转为 base64 ,浏览器访问base64字符串就不需要再次发送请求给服务器,可以直接拿到图片的数据,防止发起不必要的网络请求
https://blog.csdn.net/qq_41684621/article/details/124555433
1、把 base64 字符串复制到 img 标签中
2、浏览器访问后,可以拿到图片的数据
通过require引入静态图片路径的解释
需求: index.vue 怎样能把 assets 里面的图片拿出来加载使用。
1 、方式一:在 img 标签中直接写上路径
<img src="../assets/logo.png" alt="" />
方式二:使用变量接收静态图片路径(必须使用 require)
<img :src="imgSrc" alt="" />
data() {return {// Vue中js部分引入静态图片,必须使用require引入,否则无法正常显示imgSrc:require('../assets/logo.png')// 不可以使用以下写法// imgSrc:'../assets/logo.png'}}
经验
- 经过验证,若需要通过变量接收静态图片路径,则必须使用 require 引入,原因是因为:在标签中直接写上图片路径,路径会转为
base64,但是如果通过变量设置静态路径,则不会转为 base64,仍然显示变量值对应的路径,故图片无法正常显示。 - 正常业务开发中使用变量 require 引用静态图片路径的场景并不多,更多的则是静态图片直接在标签中引入或者直接引用网络路径来展示图片。
require import相关推荐
- nodejs require/import导包报错以及解决方法,chalk-animation库使用
最近在看一本小册子,文章中使用到了chalk-animation这个库,然后学习了一下chalk-animation这个库 话不多说,开始学习,先安装chalk-animation这个库 npm in ...
- require和import的区别
require和import的区别 require和import的区别 - wenxuehai - 博客园 目录 1.require 和 import 的区别 2.require() | exp ...
- (区别、详解、使用)module.exports与exports,export与export default,import 与require
目录 导出简介(里面有小细节请仔细阅读) module.exports与exports 1.该js文件要导出的值即为test 2.该js文件要导出的值即为test1和test2 3. 注意这里我是先给 ...
- oss 部署前端项目报错 Cannot find module ‘@/views/.....‘(require和import区别)
使用框架:项目使用的是若以框架前后端分离. 我们把项目下载下来后,可以看到若依框架里的这样一段代码: export const loadView = (view) => {if (process ...
- AMD and CMD are dead之js模块化黑魔法
缘由 在2013-03-06 13:58的时候,曾甩下一片文章叫:<为什么不使用requirejs和seajs>,并放下豪言说发布一款完美的模块化库,再后来就把那篇文章删了,再然后就没有然 ...
- Java 最常见的 10000+ 面试题及答案整理:持续更新
Java面试题以及答案整理[最新版]Java高级面试题大全(2021版),发现网上很多Java面试题都没有答案,所以花了很长时间搜集,本套Java面试题大全,汇总了大量经典的Java程序员面试题以及答 ...
- webpack源码分析之三:loader
前言 在webpack特性里面,它可以支持将非javaScript文件打包,但前面写到webpack的模块化打包只能应用于含有特定规范的JavaScript文件.本次介绍的loader则是用来解决这类 ...
- 如何在另一个JavaScript文件中包含一个JavaScript文件?
JavaScript中是否有类似于CSS中@import的内容,可让您在另一个JavaScript文件中包含一个JavaScript文件? #1楼 而不是在运行时添加,而是使用脚本在上传之前进行串联. ...
- Vue-CLI + Webpack 搭建 Vue 项目最全分析
一.vue-cli介绍 vue-cli是一个用于快速搭建vue项目的 脚手架. 二.vue-cli安装.更新 安装过nodeJs .cnpm 后,全局安装vue-cli(以后其他项目可直接使用): c ...
最新文章
- 游戏平台运维自动化扩展之故障自愈
- 关于地理信息系统(GIS)的几个问题
- Mybatis 逆向工程 自动生成代码
- hdu1018--Big Number
- leetcode155. 最小栈
- model 提交表信息java,Angular6+antd+java+SpringMVC,表单提交自动接收模型对象?
- React基础篇(二)之点击button修改属性值
- 【ANDROID游戏开发之六】在SURFACEVIEW中添加系统控件,并且相互交互数据!
- c语言 中断 局部变量 not allocated,C语言(函数)调用过程(略译)
- javaScript 计算两个日期的天数相差~~~
- 什么是Redis缓存雪崩、缓存穿透和缓存击穿
- Dubbo原理和源码解析之服务暴露
- Photoshop:渐变工具的使用
- 思科面试经验| 2020-21年校园内虚拟招聘实习
- 【samba】Wodows同步Linux文件|搭建共享文件服务器——在windows上映射网络驱动器...
- 墨门云文件加密系统有哪些功能特点?
- 【教程】win10下安装Biolinux双系统
- 战神引擎 过黄列表教程
- 微信小程序如何实现切换主题(更改皮肤)
- 8CollapsingToolbarLayout源码分析
热门文章
- 华硕K42J设置USB启动系统
- 茶学领域如何用的上计算机,计算机视觉图像理技术在茶学领域应用方法的研究.pdf...
- 【不专一的开发】UML(二)---行为图(状态图、活动图、序列图、协同图)
- c语言程序一起来看流星雨,一起来看流星雨经典语录
- SkeyeVSS综合安防Onvif、RTSP、GB/T28181无插件直播点播解决方案之报警中心管理
- uni-app项目之电影预告
- 八年级下册册计算机计划,长春版八年级信息技术下册全册教案
- 苹果WWDC大会:iOS求稳,AR求新,APP求全
- Basler GigE相机,关于丢帧问题的描述和解决【Basler】
- 关于left与offsetLeft的区别