Проблема с добавлением изображения с помощью Tailwind CSS: ошибка «Модуль не найден» ⇐ CSS

[Anonymous]

Введите описание изображения здесь. Когда я пытаюсь добавить изображение с помощью Tailwind CSS с @extend, я получаю сообщение об ошибке: Модуль не найден: Ошибка: невозможно разрешить './public/img/header-img.jpg'. Как решить эту проблему?
Я пытаюсь добавить изображение из моего проекта в компонент с помощью Tailwind CSS, но несмотря на то, что я правильно указал каталог, в котором находится изображение обнаружен, я все равно получаю эту ошибку.
Вот фрагмент кода, который я пытаюсь использовать:

Код: Выделить всё

    import React from 'react'

const Random = () => {
return (

)
}

export default Random

tailwind.config.js =>
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
container:{
center: true,
},
extend: {
colors:{
"header-color":"#0E46A3",
"find-color":"#202528",
},
backgroundImage: {
'main-image':"url('./public/img/header-img.jpg')",
}
},
},
plugins: [],
}

Операционная система: Windows 10.
Версия Tailwind CSS: текущая.
Вот шаги по устранению неполадок, которые я уже пробовал:
p>
Убедился, что путь к файлу изображения правильный.
Проверил структуру каталогов проекта и убедился, что изображение находится в правильной папке.
Проверил правильность имени и расширения файла. изображения верны.
Не могли бы вы помочь мне устранить эту ошибку? Заранее спасибо.

Подробнее здесь: https://stackoverflow.com/questions/783 ... ound-error