时间戳

首页 > 解决方案 > 如果图像以特定名称开头，则在图像顶部添加文本？| JS在类中包装图像

javascript - 如果图像以特定名称开头，则在图像顶部添加文本？| JS在类中包装图像

问题描述

我的服务器上有一组以某个名称开头的图像，因此：

“社区照片_John.jpg”

“communityphoto_Mary.jpg”等。

PHP 是否可以在找到以“communityphoto_”开头的图像时在图像顶部显示文本？如：“社区提交的照片，提交到我们的邮箱”

我找到了一些解决方案，但它们似乎都将文本烘焙到图像上（例如创建/保存带有嵌入文本的实际图像），但我只想在图像上显示文本，因为将来它可能更改，但我不想替换所有图像。

我提前道歉，我无法提供更多帮助，我仍处于我的 PHP 冒险的开始阶段，还没有走到现在。非常感谢您的关注和建议

标签： javascriptphpwordpress

解决方案

我认为在这种情况下，JavaScript 和一些 CSS 对你来说是更好的选择。根据图像的加载方式，最好的办法仍然是解析或过滤它，然后添加一个类（或一些 HTML）。

以下面的代码片段为例。它找到名称中包含的所有图像communityphoto_，如果找到，则遍历它们，将它们<div>与.community-image类一起包装在 a 中。

然后使用一些 CSS，您可以使用::after伪类在其上放置任何您想要的任意文本。如果需要，您还可以将此文本作为 a<span>或其他内容添加到 JavaScript 中。另请注意，您不能只进行::after拍摄img，因为img标签是无效元素（也称为自动关闭），在任何情况下都不会获取任何内容，所以这就是我将它包装在一个元素中并将其应用到那里的原因。

var communityImages = document.querySelectorAll('img[src*="communityphoto_"]');
if( communityImages.length > 0 ){
  communityImages.forEach(function(image){
    image.outerHTML = '<div class="community-image">'+ image.outerHTML +'</div>';
  });
}
.community-image {
  display: inline-block;
  position: relative;
}

.community-image:after {
  content: "Photo submitted by the community, submit yours to our email";
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,.2);
  font-size: 11px;
  padding: 3px 6px;
}
<div>
  <img src="https://xhynk.com/placeholder/300/100/communityphoto_1/"/>
  <img src="https://xhynk.com/placeholder/300/100/communityphoto_2/"/>
  <img src="https://xhynk.com/placeholder/300/100/something/" />
  <img src="https://xhynk.com/placeholder/300/100/communityphoto_3/"/>
  <img src="https://xhynk.com/placeholder/300/100/communityphoto_4/"/>
  <img src="https://xhynk.com/placeholder/300/100/another/"/>
</div>

推荐阅读