在Vue实现一个画廊页面(https://starnight.top/2024/08/10/Vue实现一个画廊页面/)中出现了一个问题，即img标签导入的图片在排版时，在margin、padding、border等属性都不存在的情况下，下方仍然出现了空行。为了探寻这一情况的原因和解决方案做了一系列的研究。问题示例如下所示，在图片的下方存在着一个空行，使得外层div的边框没能完整地贴合图片。 !(https://images.starnight.top/img/Pasted%20image%202

使用Vue实现一个简单的瀑布流画廊页面demo，图片简单地从assets目录下读取并在页面进行展示，在这过程中遇到了一些问题进行一下记录。 Vite读取assets目录下的文件 在webpack中可以通过require.context方法来读取目录下的所有文件 其具体用法为 js require.context(directory,useSubdirectories,regExp) directory: 要搜索的目录 useSubdirectories：是否要搜索子目录 re

实现多个渐变色叠加的边框 如何实现下面这个由两个渐变色叠加的边框效果： !(https://images.starnight.top/img/aec5805e03422bd0b42c52f56efc040.jpg) 对于单个渐变色的边框可以用border-image轻松实现 css .border-image-demo{ margin: 10px 0; width: 200px; height: 100px; border: 2px solid; border-im

web展示图片出现锯齿 现象 在页面中使用img标签展示图片时，发现图片会出现锯齿，严重影响观感。一开始怀疑会不会是img标签的问题，在改用div标签并设置background-image后发现仍然存在这个问题。 在对css的各个属性进行测试的时候发现，当去除object-fit:cover属性（同理background-size:cover属性）时，图片就不会有锯齿，但是这样图片的大小尺寸就不对，无法显示成预期的大小。 !(https://images.starnight.top/

使用ECharts和G2实现图表 在网页上常用的图表显示框架有ECharts、G2等，通过使用ECharts和G2实现相同效果的双折线带面积的图表来学习其用法。 ECharts ECharts绘制图表通过设置options来实现，并通过setOption来应用配置项，同时实现图表的更新。 安装ECharts shell npm install echarts 获取容器 首先在template中准备一个定义了宽高的DOM容器，并通过ref创建引用，在script中定义该引用

ECharts的Tooltip不显示原因 问题 在使用ECharts添加Tooltip的时候发现**浮窗不显示，但其辅助线可以正常显示**，网上查到的原因都说的是Vue的代理问题，不能将Echarts实例定义为ref或reactive对象，但我在代码里并没有将其定义为ref对象，且用上makeRow等方法后仍然不显示提示框。如下所示。 !(https://images.starnight.top/img/2cf41d75d3cbd1589193ad65bf92960.jpg) HTM