v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: implement blurDataURL

Browse source
This commit is contained in:
Alvalen 2025-07-18 05:38:12 +07:00
parent 9bfed65f40
commit 2504037f26
4 changed files with 6 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/projects/(project-card)/index.jsx
View file

@ -2,6 +2,7 @@ import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import BlurImage from "@/public/image/placeholder/blur.jpg";
export default function ProjectCard({ project, index, activeCategory }) { export default function ProjectCard({ project, index, activeCategory }) {
return ( return (
@ -28,7 +29,7 @@ export default function ProjectCard({ project, index, activeCategory }) {
objectFit="cover" objectFit="cover"
placeholder="blur" placeholder="blur"
className="bg-slate-950 opacity-10 group-hover/tes:opacity-100 transition-all ease duration-500" className="bg-slate-950 opacity-10 group-hover/tes:opacity-100 transition-all ease duration-500"
blurDataURL={project.thumbnail} blurDataURL={BlurImage.src}
/> />
<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2"> <div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
<h4 className="text-white">{project.year}</h4> <h4 className="text-white">{project.year}</h4>

3
app/projects/[slug]/page.jsx
View file

@ -8,6 +8,7 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"; import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import NotFound from "@/app/not-found"; import NotFound from "@/app/not-found";
import Image from "next/image"; import Image from "next/image";
import BlurImage from "@/public/image/placeholder/blur.jpg";
import FixedButon from "@/components/FixedButton"; import FixedButon from "@/components/FixedButton";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"; import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
@ -199,7 +200,7 @@ function Page(props) {
className="mb-5 h-auto max-h-screen max-w-7xl mx-auto" className="mb-5 h-auto max-h-screen max-w-7xl mx-auto"
width={1920} width={1920}
height={1080} height={1080}
blurDataURL={image} blurDataURL={BlurImage.src}
layout="responsive" layout="responsive"
objectFit="contain" objectFit="contain"
/> />

3
app/projects/components/ProjectCard.jsx
View file

@ -2,6 +2,7 @@ import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import BlurImage from "@/public/image/placeholder/blur.jpg";
export default function ProjectCard({ project, index, activeCategory }) { export default function ProjectCard({ project, index, activeCategory }) {
return ( return (
@ -28,7 +29,7 @@ export default function ProjectCard({ project, index, activeCategory }) {
objectFit="cover" objectFit="cover"
placeholder="blur" placeholder="blur"
className="bg-slate-950 opacity-10 group-hover/tes:opacity-100 transition-all ease duration-500" className="bg-slate-950 opacity-10 group-hover/tes:opacity-100 transition-all ease duration-500"
blurDataURL={project.thumbnail} blurDataURL={BlurImage.src}
/> />
<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2"> <div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
<h4 className="text-white">{project.year}</h4> <h4 className="text-white">{project.year}</h4>

BIN
public/image/placeholder/blur.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB