score:1
if just blur is the problem, then why not simply remove it?!
import image from "next/image";
const home = () => (
<>
<div classname="img-container">
<image
src="https://picsum.photos/600/400"
alt="random image"
width="600"
height="400"
placeholder="blur"
blurdataurl="data:image/svg+xml,%0a%3csvg xmlns='http://www.w3.org/2000/svg' height='800' width='1200' viewbox='-120.01695 -39.28975 1040.1469 235.7385'%3e%3cdefs%3e%3cclippath clippathunits='userspaceonuse' id='a'%3e%3cpath d='m0 1178.69v0h6000.85v1178.69z'/%3e%3c/clippath%3e%3c/defs%3e%3cg clip-path='url(%23a)' transform='matrix(.13333 0 0 -.13333 0 157.159)'%3e%3cpath d='m1656.86 568.617l57.57 57.578h-117.91v139.981h-62.27v324.172c0-63.141 36.33-114.18 108.99-114.18h44.11v53.629h-32.87c-39.79 0-57.96 23.359-57.96 62.281v242.715zm3224.51-225.105v482.734h-110.62v336.699c0-62.972 38.29-126.793 129.34-126.793h62.96v93.61h-42.54c-28.08 0-39.14 13.609-39.14 39.996zm5884.28 653.25l-71.49-274.008-91.05 274.008h-80.83l-90.21-274.008-71.47 274.008h-117.44l136.15-443.344h91.05l92.75 278.258 92.76-278.258h91.05l135.3 443.344zm5225.5 323.938c-12.76-12.766-29.79-19.575-51.91-19.575-22.13 0-38.3 6.809-51.06 19.575c5099.55 346.902 5097 386.055 5097 432c0 45.961 2.55 84.254 25.53 107.219 12.76 12.765 28.93 19.574 51.06 19.574 22.12 0 39.15-6.809 51.91-19.574 22.97-22.965 25.53-61.258 25.53-107.219 0-45.945-2.56-85.098-25.53-108.062zm-51.91 334.417c-65.53 0-109.77-25.523-137-54.457-40-41.699-50.21-91.91-50.21-171.898 0-80.832 10.21-131.043 50.21-172.742 27.23-28.93 71.47-54.457 137-54.457 65.52 0 110.62 25.527 137.85 54.457 40 41.699 50.21 91.91 50.21 172.742 0 79.988-10.21 130.199-50.21 171.898-27.23 28.934-72.33 54.457-137.85 54.457zm-647.76 41.11v210.359h110.63v559.91h81.69v84.238h-81.69v48.508c0 25.528 12.76 39.992 39.13 39.992h42.56v93.598h-62.98c-90.2 0-129.34-63.816-129.34-126.781zm-250.45-88.758v42.543h-108.07v209.906h110.62v267.196c0 56.164 37.45 81.691 71.49 81.691 27.23 0 41.34-9.051 58.37-26.066l83.73 83.933c-30.63 30.637-61.27 41.695-104.67 41.695-47.65 0-90.2-22.121-111.47-47.648zm3834.8 472.852c.84 19.578 3.4 31.48 10.21 47.652 11.91 26.383 36.59 45.945 74.03 45.945s62.12-19.562 74.03-45.945c6.81-16.172 9.36-28.074 10.22-47.652zm84.24 185.503c-114.88 0-193.16-81.687-193.16-226.355 0-179.551 100.4-227.199 205.07-227.199 79.99 0 123.39 24.679 168.49 69.785l-67.22 65.519c-28.09-28.085-51.91-41.695-100.42-41.695-62.12 0-97 41.695-97 98.703h277.41v49.352c0 121.687-69.79 211.89-193.17 211.89zm-304.77-5.105l-89.35-274.008-90.2 274.008h-116.58l163.38-443.344h86.8l162.53 443.344zm-430.72-329.312c-12.76-12.766-29.79-19.575-51.91-19.575-22.12 0-38.29 6.809-51.06 19.575-22.98 22.964-25.53 62.117-25.53 108.062 0 45.961 2.55 84.254 25.53 107.219 12.77 12.765 28.94 19.574 51.06 19.574s39.15-6.809 51.91-19.574c22.97-22.965 25.53-61.258 25.53-107.219 0-45.945-2.56-85.098-25.53-108.062zm-51.91 334.417c-65.52 0-109.77-25.523-137-54.457-39.99-41.699-50.21-91.91-50.21-171.898 0-80.832 10.22-131.043 50.21-172.742 27.23-28.93 71.48-54.457 137-54.457s110.62 25.527 137.85 54.457c40 41.699 50.21 91.91 50.21 172.742 0 79.988-10.21 130.199-50.21 171.898-27.23 28.934-72.33 54.457-137.85 54.457zm-292.6-22.16h-77.64l-192.97-187.859.3 377.531h-62.28v209.992h62.28l-.3 155.324 75.55 75.817 142.74-231.141h76.97l-176.57 274.281zm-533.4-50.804c40.65 0 65.74-12.102 97.74-47.563 0 0 41.7 40.524 41.35 40.891-43.66 46.711-80.73 62.035-139.09 62.035-107.26 0-188.57-72.656-188.57-217.981 0-145.304 81.31-217.972 188.57-217.972 58.82 0 96.01 15.578 140.12 63.14l-42.38 40.653c-32-35.461-57.09-48.434-97.74-48.434-41.52 0-76.12 16.434-98.61 48.434-19.9 27.679-27.68 60.554-27.68 114.179 0 53.629 7.78 86.504 27.68 114.184 22.49 32.012 57.09 48.434 98.61 48.434zm-306.2-224.883c0-35.477-6.93-59.696-21.63-73.528-26.82-25.949-58.82-28.55-95.15-28.55-67.47 0-97.74 23.355-97.74 72.668 0 49.293 31.14 75.242 95.15 75.242h119.37zm-108.12 280.246c-68.28 0-111.29-13.469-148.98-61.184-.52-.648 40.85-40.882 40.85-40.882 25.09 35.46 52.77 48.437 107.26 48.437 77.85 0 108.99-31.145 108.99-93.414v-40.652h-128.02c-95.15 0-147.05-48.45-147.05-122.836 0-33.731 11.25-65.731 32-86.5 26.82-27.68 61.42-38.922 120.24-38.922 57.09 0 88.22 11.242 122.83 45.844v-40.653h62.27v288.91c0 92.555-56.22 141.852-170.39 141.852zm-532.58-191.156l-68.34 6.05c-53.62 4.321-74.38 25.95-74.38 62.282 0 43.246 32.86 70.062 95.15 70.062 44.11 0 83.04-10.383 113.3-33.726l40.67 40.652c-38.07 31.129-92.56 45.836-153.11 45.836-90.83 0-156.56-46.707-156.56-124.555 0-70.066 44.11-107.258 127.15-114.179l70.07-6.051c49.3-4.336 70.93-25.09 70.93-62.285 0-50.164-43.25-75.254-113.32-75.254-52.76 0-98.61 13.843-132.35 49.304l-41.51-41.523c46.71-44.977 102.93-61.41 174.73-61.41 102.93 0 172.99 47.578 172.99 129.742 0 79.594-51.03 108.129-125.42 115.055' fill='%23212325'/%3e%3cpath d='m840.719 105.18v315.511h105.164v0h0v420.691h105.164v105.18h735.555' fill='%23bcbbbc'/%3e%3cpath d='m210.445 210.359h525.821v105.164h210.445zm471.266 968.331l-84.383-62.76 313.817-421.914 84.382 62.761zm420.879 929.949l404.047-336.504 67.301 80.813l488.18 1010.76zm288.973 696.102l476.664-221.993 44.398 95.332-476.664 221.993zm-68.086-246.391l514.582-108.149 21.629 102.918-514.582 108.149-21.629-102.918' fill='%23f48023'/%3e%3c/g%3e%3c/svg%3e"
/>
</div>
<style jsx global>{`
.img-container > span > img {
filter: none !important;
}
`}</style>
</>
);
export default home;
output:
if you don't want to hardcode the data uri, you can use getstaticprops
like this:
import fs from "fs";
import path from "path";
import image from "next/image";
import svgtominidatauri from "mini-svg-data-uri";
const home = ({ coverdataurl }) => (
<>
<div classname="img-container">
<image
alt="random image"
src="https://picsum.photos/600/400"
width="600"
height="400"
placeholder="blur"
blurdataurl={coverdataurl}
/>
</div>
<style jsx global>{`
.img-container > span > img {
filter: none !important;
}
`}</style>
</>
);
const getstaticprops = async () => ({
props: {
coverdataurl: svgtominidatauri(
fs.readfilesync(path.join(process.cwd(), "/cover.svg"), "utf8").tostring()
)
}
});
export default home;
export { getstaticprops };
if you are fine with hardcoding then use any online service like this to convert your svg to data uri.
there are other methods as well, like using a custom webpack config and setting up asset/inline
for svg files, or maybe a babel loader. but that is just an overkill, also it will change the behavior of all svg imports.
Source: stackoverflow.com
Related Query
- How can I add custom image placeholders in Next.js?
- How to add custom `PNG` image to material ui icon
- How can I add custom props to TablePagination ActionComponent?
- How can I add custom props to an Option using React Select?
- How can I load multiple images with Next Image from a loop?
- How can I add an overlay over a Gatsby Static Image Component?
- How I can add image in material table cell?
- How can I dynamically add images to my pages in Gatsby using the image component?
- How can you add 2 classname in a single div in next js?
- How can I add a Custom component in a Data object?
- How can I add a custom color to a gradient with Tailwind and React?
- How can I add and save my own custom field in the WordPress Gutenberg (block editor) panel?
- How can i add class to a image element in quill image Handler?
- How can I add a custom attribute to React's HTMLAttributes from a library?
- How can I add a fade when the image is changed?
- How can I add some text on a background image with Material UI Card and CardMedia
- How can I add my Axio post on submit of my upload form when I am using a custom hook for form validation?
- How can I add a country flag to drop down menu next to counrty name in reactjs?
- How can I add image elements to my page dynamically?
- How can I add Vanilla JS to my react app to create Image Modal pop-ups?
- How to add custom css of react-bootsrap component in next js
- How can I add hover effect on react-router custom link?
- how to add custom active class to sidebar menu of dashboard in next js?
- How can i add custom marker to map using react-map-gl?
- How can i get all image urls from my nasa api and add them into an image slider
- Unable to add alert notification for the image size validation and its different types format before uploading it how can we implement
- How can i add custom text to react-datepicker?
- How to add custom html attributes in JSX
- How can I add raw data body to an axios request?
- How do I add color to my svg image in react
More Query from same tag
- How to add styles to part of a body text in react
- React Module Parse Failed – react-map-gl
- Can't find an internal method in a React container component
- Fetch json by ID in React from parent component
- Merging two arrays into one that has the same amount of objects
- Wait for redux action to finish dispatching when using redux saga
- Is there a way to list this dictionary into the front end (displayed in the browser) using react?
- React js says Cannot read property 'name' of undefined when calling json files
- Unexpected function expression - ESLint error when using MUI Snackbar Component customized with Alert
- Getting doc from Firestore in auth listener creating an infinite loop, nextjs
- ReactJS: execute code after .map() statement with ajax call in it is finished
- Problem with rehydrating a tree structure in mobx-persist
- Strange order of execution react
- React TS get prop for shared component
- Sending 'sent' data from a page to a component in Gatsby
- How to send firebase refreshToken ? React
- How can I use the built in Object.assign in react?
- React.js - conditionally use dangerouslySetInnerHTML
- react-select in web-component | onChange Event
- Using globally defined script inside the react component
- How to make the tooltip follow the cursor in Piechart?
- Jest coverage still flagging line after applying test
- Nested Touchable with absolute position
- Webpacker build error, space between the word 'loader' as 'lo ader.js'
- making second api call after getting data from the first api
- Allow a stateless function to accept multiple different prop interfaces
- Jquery in React is not defined
- Render a DataGrid cell with a colored oval with text/icon in it
- How to pass multiple properties to a function React
- Memory leak error while calling fetch API in react