I’m trying to generate a blurDataURL for my images using a node.js library, so I created an endpoint /api/images/[src].js where src is the url of the builder loaded image.
blurDataURL is a block/component option which I want to bind with a dynamic value, in this case I need the src prop of the image. I’ve been debugging with console.log, and the only way to get this value is trough $block.props.block.component.options.src. Is there a better way to achieve this?
What I would actually like to do is generate those blurDataURL’s inside getStaticProps but because I don’t know all the image src’s at that time I can’t do it.
With builder.get() you can get all the page data, but you have to find the right component and then modify its options (although if you manually change an option it is not reflected in builder editor).
For other images where I know the src there is not any problem.
Hi @luigiveoworld, you’re on the right track with fetching the page data and modifying it! An easier way may be to create a custom image component so that you get direct access to the src prop in your code.
Hi @ancheetah, thanks for your response. I’m already using a custom image component, the problem here is that I have to generate the base64-encoded image in node (backend) I can’t use that library in the front end.
@luigiveoworld could you please give a detailed example with code so I can look into this further? If there are any errors and you can share the reproducible code with codesandbox.io or similar that would be great. Thanks!
Hi @luigiveoworld thanks for sharing that. Your initial approach of mapping through blocks and overwriting the images is the best solution here. Because your blur function runs server-side you will not see the images blurred in the Builder editor preview because the preview is only rendered client side. Alternatively you can add a filter blur with css to your images to preview the blur in both draft and live mode.