Javascript 如何通过网页包解析节点_模块中的图像

我在用拉威尔和Intertia和Vue。我安装了lightbox

npm安装lightbox2——保存

这就是我的

webpack.config.js

的样子：

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

resources/js/app.js

如下所示：

require('./bootstrap');
require('lightbox2/dist/js/lightbox');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .mixin(require('./translation'))
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'intlTelInput.min.css';
@import 'toastr.min.css';
@import 'lightbox2/dist/css/lightbox.min.css';

.logo {
    max-height: 50px;
}

resources/css/app.css

如下所示：

require('./bootstrap');
require('lightbox2/dist/js/lightbox');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .mixin(require('./translation'))
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'intlTelInput.min.css';
@import 'toastr.min.css';
@import 'lightbox2/dist/css/lightbox.min.css';

.logo {
    max-height: 50px;
}

但当我尝试运行npm run dev时，我得到以下错误：

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../images/loading.gif' in 'C:\xampp\htdocs\site\resources\css'

该图像位于

node\u模块/lightbox2/dist/images