How to handle if the src given in docx Hyperlink image is not available.

[Dhurba123a]

Hi, We are using docx report to generate the report. But when hyperlink is given to image and if the image is not available it Throws error 'Error: Error while executing docx recipe. getaddrinfo ENOTFOUND picsm.photos\n at module.exports ...........'.
Is there any other methods I can render images ? for example with base64?
and if the image is not available can I show nothing?

[bjrmatos]

hi! yes the image also accepts base64 input but in the shape of a base64 data uri, see this example that uses base64 data uri for the image.

[Dhurba123a]

What happens when the image is not available? It's giving Error: Error while executing docx recipe. getaddrinfo ENOTFOUND image.
Is there any way around so that I can render remaining part of the report if image is not available. Please help..its urgent

[bjrmatos]

yes, right now it just throws an error, there is no special handling on this. perhaps we can consider implementing some kind of fallbackSrc when this happens, but this can also be done right now using helpers.

here is link that shows how to implement a custom fallback https://playground.jsreport.net/w/anon/qM203vEC

you need to update the helper call in your hyperlink to be like this

and in your template have this helper:

const jsreport = require('jsreport-proxy')
const axios = await jsreport.npm.require('axios@0.24.0')

async function docxImageWithFallback (options) {
    const src = options.hash.src

    if (src.startsWith('data:')) {
        return src
    }

    try {
        console.log('sending request...')
        const response = await axios({
            url: src,
            responseType: 'arraybuffer',
            method: 'GET'
        })

        const contentType = response.headers['content-type'] || response.headers['Content-Type']

        if (!contentType) {
        throw new Error(`Empty content-type for remote image at "${src}"`)
        }

        const extensionsParts = contentType.split(';')[0].split('/').filter((p) => p)

        if (extensionsParts.length === 0 || extensionsParts.length > 2) {
        throw new Error(`Invalid content-type "${contentType}" for remote image at "${src}"`)
        }

        // some servers returns the image content type without the "image/" prefix
        imageExtension = extensionsParts.length === 1 ? extensionsParts[0] : extensionsParts[1]
        imageBuffer = Buffer.from(response.data)
        imgDataUri = `data:image/${imageExtension};base64,${imageBuffer.toString('base64')}`
    } catch (err) {
        imgDataUri = 'data:image/png;base64,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'
    }

    return docxImage.call(this, {
        ...options,
        hash: {
            ...options.hash,
            src: imgDataUri
        }
    })
}