html - 如何才能让显示的图片名称后面隐藏分辨率？

Question

请问各位大伽：如何才能让显示的图片名称后面不显示分辨率，就像这样分辨率（1088X2163），不显示出来。请帮忙解决，谢谢了！

已经在对图片样式，名称等做了设置，未达到理解效果，希望得到答复，谢谢了！

Answer 1

不太清楚你的问题是什么，看起来可能是你有一个类似于这样的HTML结构：

<div>
  <img src={demo.url} alt={demo.title} />
  <p>{demo.title}</p>
</div>

并且你的图片名称(demo.title)中有一个分辨率信息。但是你不想展示在前台页面中。因为正常的情况下是不会显示图片的分辨率信息的。

可以使用一个函数去处理把对应部分的信息删除掉：

// 文件名处理函数
function fileNameHandle(fileName) {
  // 替换掉文件名中的分辨率信息 
  const fileNameReg = /(\d{1,5}[xX]\d{1,5})/
  return fileName.replace(fileNameReg, '')
} 

fileNameHandle('test-file-name-1080x720.jpg') // test-file-name-.jpg
fileNameHandle('test-file-name-1080X720.jpg') // test-file-name-.jpg
fileNameHandle('test-file-name-80X80.jpg') // test-file-name-.jpg
fileNameHandle('test-file-name-999999X9999.jpg') // test-file-name-9.jpg

具体的正则规则你就自己修改咯，我这边只限制了分辨率数值的长度1-5位，间隔符可以是 x 或者 X