Correct URI and Route but Page Won't Load (Blank Page)

Remove View_Image::_remap() method.
It is an unnecessary old feature and only makes the existing routing definitions confusing.

Okay I removed the remap and the extra view_image route so now the View loads, but how to route for the Ajax requests to like/dislike/favorite/comment/subscribe?

'\App\Views\js\image_action.php' I load my js as a view so that I can pass them dynamically through the controller. It use to work. I send data['script'] = 'js/image_action.php' to the view. Then use:

PHP Code:

<?php if (isset($script)) {
      echo view($script);
  } ?>

All of this use to work when I allowed set auto route. 

Here is my javascript with totally wrong site_url() and no idea how to route them just in case it helps explain how I did it.

PHP Code:

<script>
    
    $(document).ready(function() {  
        var csrfName = "<?= csrf_token(); ?>";
        var csrfHash = "<?= csrf_hash(); ?>"; 
        var viewkey = "<?= esc($image->viewkey); ?>";

        // If user views image (on page refresh)
        $.ajax({
            type: "post",
            url: "<?= site_url('View_Image/action'); ?>",
            dataType: "json",
            data: {
                [csrfName]: csrfHash,
                "viewkey": viewkey,
                "action": 'view',
            },
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            },
            success: function(data) {
                var res = data;
                csrfName = data.csrfName;
                csrfHash = data.csrfHash;

                // display number of views
                $('span.views').text(res.views);
            }
        });

        // if the user clicks on the like button
        $(".like-button").on("click", function() {
            var viewkey = $(this).data("viewkey");
            $clicked_btn = $(this);

            if ($clicked_btn.hasClass("fa-thumbs-o-up")) {
                action = "like";
            } else if ($clicked_btn.hasClass("fa-thumbs-up")) {
                action = "unlike";
            }

            $.ajax({
                url: "<?= site_url('View_Image/action'); ?>",
                type: "post",
                dataType: "json",
                data: {
                    [csrfName]: csrfHash,
                    "action": action,
                    "viewkey": viewkey,
                },
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                },
                success: function(data) {
                    var res = data;
                    csrfName = data.csrfName;
                    csrfHash = data.csrfHash;

                    if (action == "like") {
                        $clicked_btn.removeClass("fa-thumbs-o-up");
                        $clicked_btn.addClass("fa-thumbs-up");
                    } else if (action == "unlike") {
                        $clicked_btn.removeClass("fa-thumbs-up");
                        $clicked_btn.addClass("fa-thumbs-o-up");
                    }

                    // display number of likes and dislikes
                    $clicked_btn.siblings('span.likes').text(res.likes);
                    $clicked_btn.siblings('span.dislikes').text(res.dislikes);

                    // Change button styling of the other button if user is reacting the second time to image
                    $clicked_btn.siblings("i.fa-thumbs-down").removeClass("fa-thumbs-down").addClass("fa-thumbs-o-down");
                }
            });
        });
        // If the user clicks on the dislike button
        $(".dislike-button").on("click", function() {
            var viewkey = $(this).data("viewkey");
            $clicked_btn = $(this);

            if ($clicked_btn.hasClass("fa-thumbs-o-down")) {
                action = "dislike";
            } else if ($clicked_btn.hasClass("fa-thumbs-down")) {
                action = "undislike";
            }

            $.ajax({
                url: "<?= site_url('View_Image/action'); ?>",
                type: "post",
                dataType: "json",
                data: {
                    [csrfName]: csrfHash,
                    "action": action,
                    "viewkey": viewkey
                },
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                },
                success: function(data) {
                    var res = data;
                    csrfName = data.csrfName;
                    csrfHash = data.csrfHash;

                    if (action == "dislike") {
                        $clicked_btn.removeClass("fa-thumbs-o-down");
                        $clicked_btn.addClass("fa-thumbs-down");
                    } else if (action == "undislike") {
                        $clicked_btn.removeClass("fa-thumbs-down");
                        $clicked_btn.addClass("fa-thumbs-o-down");
                    }

                    // display number of likes and dislikes
                    $clicked_btn.siblings('span.likes').text(res.likes);
                    $clicked_btn.siblings('span.dislikes').text(res.dislikes);

                    // Change button styling of the other button if user is reacting the second time to image
                    $clicked_btn.siblings("i.fa-thumbs-up").removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
                }
            });
        });
        // if the user clicks on the favorite button
        $(".favorite-button").on("click", function() {
            var viewkey = $(this).data("viewkey");
            $clicked_btn = $(this);

            if ($clicked_btn.hasClass("fa-regular fa-heart")) {
                action = "favorite";
            } else if ($clicked_btn.hasClass("fa-solid fa-heart")) {
                action = "unfavorite";
            }

            $.ajax({
                url: "<?= site_url('View_Image/action'); ?>",
                type: "post",
                dataType: "json",
                data: {
                    [csrfName]: csrfHash,
                    "action": action,
                    "viewkey": viewkey
                },
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                },
                success: function(data) {
                    var res = data;
                    csrfName = data.csrfName;
                    csrfHash = data.csrfHash;

                    if (action == "favorite") {
                        $clicked_btn.removeClass("fa-regular fa-heart");
                        $clicked_btn.addClass("fa-solid fa-heart");
                    } else if (action == "unfavorite") {
                        $clicked_btn.removeClass("fa-solid fa-heart");
                        $clicked_btn.addClass("fa-regular fa-heart");
                    }

                    // display number of favorites
                    $clicked_btn.siblings('span.favorites').text(res.favorites);
                }
            });
        });

        // If user clicks the subscribe button
        $(".subscribe").on("click", function () {
            var userProfile = $(this).data("user");
            $clicked_btn = $(this);

            if ($clicked_btn.hasClass("fa-solid fa-rss")) {
                action = "subscribe";
            } else if ($clicked_btn.hasClass("fa-solid fa-user-check")) {
                action = "unsubscribe";
            }

            $.ajax ({
                url: "<?= site_url('Members/subscribe'); ?>",
                type: "post",
                dataType: "json",
                data: {
                    [csrfName]: csrfHash,
                    "action": action,
                    "user_profile": userProfile,
                },
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                },
                success: function(data) {
                    var res = data;
                    csrfName = data.csrfName;
                    csrfHash = data.csrfHash;

                    if (action == "subscribe") {
                        $clicked_btn.removeClass("fa-solid fa-rss");
                        $clicked_btn.addClass("fa-solid fa-user-check");
                    } else if (action == "unsubscribe") {
                        $clicked_btn.removeClass("fa-solid fa-user-check");
                        $clicked_btn.addClass("fa-solid fa-rss");
                    }
                }
            });
        });

        $("#cancel-comment-reply-link").hide();

        $(".reply-button").on('click', function(event) {
            event.preventDefault();
            var id = $(this).attr("id");

            if ($("#li-comment-" + id).find('ul').length > 0) {
                $("#li-comment-" + id + " ul:first").prepend($("#comment-form-wrapper"));
            } else {
                $("#li-comment-" + id).append($("#comment-form-wrapper"));
            }

            $("#reply-id").attr("value", id);
            $("#cancel-comment-reply-link").show();
        });

        $("#cancel-comment-reply-link").bind("click", function(event) {
            event.preventDefault();
            $("#reply-id").attr("value", "");
            $("#comment-object").prepend($("#comment-form-wrapper"));
            $(this).hide();
        });

        $("#comment-form").bind("submit", function(event) {
            event.preventDefault();

            if ($("#comment-text").val() == "") {
                alert("Please enter your comment");
                return false;
            }

            $.ajax({
                type: "post",
                url: "<?= site_url('View_Image/action'); ?>",
                data: $('#comment-form').serialize() + "&" + [csrfName] + "=" + csrfHash,
                dataType: 'html',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                    $('#comment-object').block({
                        message: "Please wait...",
                        css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#ccc',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                        },
                        overlayCSS: {
                            backgroundColor: '#ffe'
                        },
                    });
                },
                success: function (comment) {
                    var replyID = $("#reply-id").val();

                    if (replyID == "") {
                        $("#comment-object ul:first").prepend(comment);

                        if (comment.toLowerCase().indexOf("error") >= 0) {
                            $("#comment-resp-err").attr("value", comment);
                        }
                    } else {

                        if ($("#li-comment-" + replyID).find('ul').length > 0) {
                            $("#li-comment-" + replyID).append('<ul class="comment-text">' + comment + '</ul>');
                        }
                    }
                    $("#comment-text").attr("value", "");
                    $("#reply-id").attr("value", "");
                    $("#cancel-comment-reply-link").hide();
                    $("#comment-object").prepend($("#comment-form-wrapper"));
                    $("#comment-object").unblock();
                }
            });
        });
    });
</script>