How to fix the console log error when using require(…/) method to bind an img src?

I am trying to access the dynamic images from an array cartData in v-for. I am using the require() function and it's displaying the images but in the console, I am getting two errors.

1 - `vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "Error: Cannot find module './undefined'"`
2 - 

vue.runtime.esm.js?2b0e:1888 Error: Cannot find module './undefined'
    at webpackContextResolve (eval at ./src/assets/product_images sync recursive ^\.\/.*$ (app.js:1235), <anonymous>:41:11)
    at webpackContext (eval at ./src/assets/product_images sync recursive

following is my code

html

            <tbody v-for="(cart, index) in cartData" :key="cart.id">
                <tr>
                    <td data-th="Product">
                        <div class="row">
                            <div class="col-sm-2 hidden-xs">
                                <img :src="getImgUrl(cart.product_image)" />
                            </div>
                            <div class="col-lg-10">
                                <span class="d-none">{{ index }}</span>
                                <h5 class="nomargin">{{ cart.product_title }}</h5>
                            </div>
                        </div>
                    </td>
                  </tr>
                <tbody>

js

export default {
    name: "Cart",
    data() {
        return {
            cartData: [],
            update_qty: "1",
        };
    },


    methods: {
        getImgUrl: function(imagePath) {
            return require("../assets/product_images/" + imagePath);
        },
     }