Vue添加图片作为水印

直接上代码

把图片作为水印

<div class="info-warp">
	<div class="image-container">
	  <img src="https://img.shetu66.com/2023/06/28/1687920981963810.png" />
	  <div class="watermark-layer">
	    <img
	      v-for="(pos, idx) in watermarkPositions"
	      :key="idx"
	      :src="watermarkImg"
	      :style="{
	        left: pos.x + 'px',
	        top: pos.y + 'px',
	        opacity: 0.4,
	        width: watermarkWidth + 'px',
	        height: 'auto',
	        position: 'absolute',
	        transform: 'rotate(-20deg)',
	        pointerEvents: 'none',
	      }"
	    />
	  </div>
	</div>
	</div>
computed: {
    watermarkPositions() {
      const containerW = 800;
      const containerH = 1492; // info-warp高度
      const arr = [];
      for (let y = 0; y < containerH; y += this.watermarkHeight + this.watermarkGapY) {
        for (let x = 0; x < containerW; x += this.watermarkWidth + this.watermarkGapX) {
          arr.push({ x, y });
        }
      }
      return arr;
    },
  },
 // 水印
      watermarkImg:'https://images.pexels.com/photos/6131296/pexels-photo-6131296.jpeg?cs=srgb&dl=pexels-quang-nguyen-vinh-6131296.jpg&fm=jpg',
      watermarkGapX: 60, // 横向间距
      watermarkGapY: 60, // 纵向间距
      watermarkWidth: 120, // logo宽度
      watermarkHeight: 43, // logo高度（按实际比例）

<style lang="scss" scoped>
.info-warp {
  width: 800px;
  height: 1492px;
  .image-container {
    position: relative;
    width: 100%;
    height: 90%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
      box-shadow: 0px 5.07px 38.05px 0px rgba(0, 0, 0, 0.3);
    }

    .watermark-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }
  }
}
</style>

替换掉里面的示例图片即可