How show image in printing using datatable

Hey, I'm using datatable not the yajra package The image is fine and shows good in datatable but whenever I'm printing or using any export option it doesn't show in that option i.e print, pdf etc

<div class="table-responsive">
                    <table id="example" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th id="custom-table-heading">#</th>
                                <th id="custom-table-heading">Name</th>
                                <th id="custom-table-heading">Image</th>
                                <th id="custom-table-heading">Email</th>
                                <th id="custom-table-heading">Phone</th>
                                <th id="custom-table-heading">Address</th>
                                <th id="custom-table-heading">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if ($agents->count())
                                @foreach ($agents as $agent)
                                    <tr>
                                        <td>{{ $loop->index + 1 }}</td>
                                        <td>{{ $agent->name }}</td>
                                        <td>
                                            <img src="{{ asset( $agent->image ? 'storage/'.$agent->image : 'admin/images/avatars/no_image.jpg') }}" width="100" height="100" alt="agent image" />
                                        </td>
                                        <td>{{ $agent->email }}</td>
                                        <td>{{ $agent->phone }}</td>
                                        <td>{{ $agent->address }}</td>
                                        <td>
                                            <a href="{{ route('admin.agents.edit', $agent) }}"><i class="bx bx-edit" id="my-edit"></i></a>
                                            <a href="#" data-toggle="modal" data-target="#deleteModal-{{ $loop->index }}"><i class="bx bx-trash text-danger" id="my-delete"></i></a>
                                        </td>
                                    </tr>

                                    <!--Delete Modal -->
                                    <div class="modal fade" id="deleteModal-{{ $loop->index }}" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Delete Agent</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">	<span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body text-center">
                                                    <h1 class="text-danger">Are you sure?</h1>
                                                    <p>This action cannot be undone.</p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    <form action="{{ route('admin.agents.destroy', $agent) }}" method="POST">
                                                        @csrf
                                                        @method('delete')
                                                        <button type="submit" class="btn btn-danger"><i class="bx bx-trash"></i> Delete</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>

<script>
        $(document).ready(function () {
            var table = $('#example').DataTable( {
                buttons: [
                    {
                        extend:    'pageLength',
                        className: 'box-shadow--4dp btn-sm-menu'
                    },
                    {

                        extend:    'copy',
                        titleAttr:  'copy',
                        text:      '<i class="fadeIn animated bx bx-copy"></i>',
                        className: 'btn btn-info box-shadow--4dp btn-sm-menu',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5]
                        }

                    },
                    {
                        extend:    'excel',
                        titleAttr:    'excel',
                        text:      '<i class="fadeIn animated bx bx-file"></i> ',
                        className: 'btn btn-success box-shadow--4dp btn-sm-menu',
                        messageTop: 'Agents Data',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5]

                        }

                    },
                    {
                        extend: 'pdfHtml5',
                        titleAttr: 'PDF',
                        extension: ".pdf",
                        filename: "Agents Data",
                        title: "",
                        text: '<i class="fadeIn animated bx bx-file-blank"></i> ',
                        className: 'btn btn-warning box-shadow--4dp btn-sm-menu',
                        messageTop: 'Agents Data',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5]

                        },


                    },

                    {
                        extend: 'print',
                        titleAttr: 'print',
                        text:      '<i class="fadeIn animated bx bx-printer"></i> ',
                        className: 'btn btn-danger box-shadow--4dp btn-sm-menu',
                        messageTop: 'Agents Data',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5]

                        },
                        customize: function ( win ) {
                            $(win.document.body)
                                .css( 'font-size', '10pt' )
                                .prepend(
                                    '<div><img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;"  alt="logo"/></div>'
                                );

                            $(win.document.body).find( 'table' )
                                .addClass( 'compact' )
                                .css( 'font-size', 'inherit' );
                        },



                    },
                    {
                        extend:    'colvis',
                        titleAttr:    'Filter Column',
                        text:      '<i class="fadeIn animated bx bx-filter"></i> ',
                        className: 'btn btn-dark box-shadow--4dp btn-sm-menu'
                    },

                ],
                lengthChange: false,

            } );

            table.buttons().container().appendTo('#example_wrapper .col-md-6:eq(0)');

        });

    </script>