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 { motion } from "framer-motion";
import PropTypes from "prop-types";
import BlurImage from "@/public/image/placeholder/blur.jpg";
export default function ProjectCard({ project, index, activeCategory }) {
return (
@ -28,7 +29,7 @@ export default function ProjectCard({ project, index, activeCategory }) {
objectFit="cover"
placeholder="blur"
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">
<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 NotFound from "@/app/not-found";
import Image from "next/image";
import BlurImage from "@/public/image/placeholder/blur.jpg";
import FixedButon from "@/components/FixedButton";
import { faChevronLeft } 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"
width={1920}
height={1080}
blurDataURL={image}
blurDataURL={BlurImage.src}
layout="responsive"
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 { motion } from "framer-motion";
import PropTypes from "prop-types";
import BlurImage from "@/public/image/placeholder/blur.jpg";
export default function ProjectCard({ project, index, activeCategory }) {
return (
@ -28,7 +29,7 @@ export default function ProjectCard({ project, index, activeCategory }) {
objectFit="cover"
placeholder="blur"
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">
<h4 className="text-white">{project.year}</h4>