1. code

import React, { useState } from 'react';

function ImageBlur() {
  const [isBlurred, setIsBlurred] = useState(true);//初始狀態為模糊

//處理圖像點擊事件，切換模糊狀態  
  const handleImageClick = () => {
    setIsBlurred(!isBlurred);
  };

//根據模糊狀態應用不同的樣式  
  const imageStyle = {
    filter: isBlurred ? 'blur(5px)' : 'none',  //模糊效果
    transition: 'filter 0.5s ease', //過渡效果
    cursor: 'pointer', //光標樣式
  };

  return (
    <div>
      <h2>圖像模糊效果</h2>
      <img
        src="自定義圖片路徑"
        alt="Image"
        width={150}
        height={150}
        style={imageStyle}
        onClick={handleImageClick}
      />
      <p>點擊圖像切換模糊效果</p>
    </div>
  );
}

export default ImageBlur;

2.實作