在图像顶部添加文本 IF 图像以特定名称开头 |？JS 在类中包装图像

Question

我的服务器上有一组以特定名称开头的图像，因此：“communityphoto_John.jpg”“communityphoto_Mary.jpg”等PHP是否有可能在找到以“communityphoto_”开头的图像时在图像顶部显示文本？例如：“社区提交的照片，将您的照片提交给我们的电子邮件”我找到了一些解决方案，但它们似乎都将文本烘焙到图像上（例如创建/保存带有嵌入文本的实际图像），但我只想在图像上显示文本，因为将来它可能会改变，但我不想替换所有图像。我提前道歉，我不能更乐于助人，我仍然在我的PHP冒险的开始，还没有到现在为止。非常感谢您的关注和建议

Answer 1

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

以以下代码段为例。它查找名称中包含的所有图像，如果找到任何图像，则循环访问它们，将它们与类一起包装在 中。communityphoto_<div>.community-image

然后使用一些CSS，您可以使用：：after伪类来放置一些任意文本。如果需要，您也可以将此文本添加为 JavaScript 中的 a 或某些内容。另请注意，您不能只执行 take，因为标签是 void 元素（也称为自闭合），在任何情况下都不会获取任何内容，因此这就是为什么我将其包装在元素中并在那里应用它的原因。<span>::afterimgimg

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>