Question T18824
Visible to All Users

Default Images of image picker are not showing in PDF

created 8 months ago

Hi,

When we choose image picker in survey creator default images are loaded, if we continue with default ones, and try to generate pdf, PDF does not contain those default images.

https://plnkr.co/edit/ktMJ65ZTHq0B2sAi?preview

What is the proper way to show images in pdf, we are not in much need of showing default images also, so provide us a way to hide that also

Answers approved by surveyjs Support

created 8 months ago

Hi Lakshit,
The SurveyPDF engine uses the jsPDF MIT library to generate PDFs. It appears that jsPDF is unable to access images if the image server does not include an 'Access-Control-Allow-Origin' header (CORS policy). You may notice the following error in the browser console:

Call Stack
Access to image at 'https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg' from origin 'https://5djtz7.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

To resolve this issue, you can either store images within the survey JSON definition as Base64 strings or host the images on a server that allows cross-origin requests by including the appropriate CORS headers.

If you do not want to display those default images, update the default Image Picker definition as follows:

JavaScript
import { settings } from "survey-creator-core"; settings.toolbox.defaultJSON.imagepicker = {};

Let me know if you have further questions.

    Comments (2)

      I have used,

      Code
      options.survey.onQuestionAdded.add((_survey, options) => { if (options.question.getType() == 'imagepicker') { options.question['choices'] = JSON.parse(JSON.stringify([])) } })

      as a workaround

        Hello,
        Thank you for the update. You can customize a newly added question using the creator.onQuestionAdded function.

        JavaScript
        creator.onQuestionAdded.add((_survey, options) => { if (options.question.getType() == 'imagepicker') { options.question['choices'] = []; } })

        Please let me know if you have further questions.