Проблема с фоновым изображением файла конфигурации tailwind css

Question

Я не получаю вывод фонового изображения из tailwind.Config.Js. Tailwind.Config.Js отлично генерирует фоновое изображение, но когда я вижу результат в браузере, он показывает изображение 404 .

вот мой образец кода tailwind.config.js

      module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      // backgroundImage: theme => ({
      //   'body-bg': "url('./../images/px1.gif')",
      // })
      backgroundImage: theme => ({
        'hero-pattern': "url('../images/px1.gif')",
       })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

вот настройка веб-пакета

      let mix = require("laravel-mix");

mix.js("src/js/app.js", "js/app.js")
mix.css("src/css/app.css", "css/app.css")
  .options({
    postCss: [require("tailwindcss")],
  }).setPublicPath('public')

вот структура папок

введите описание изображения здесь

я получаю этот вывод css

      .bg-hero-pattern {
  background-image: url(/images/px1.gif?9ee64f464ce65b98bb9e4168105dc9b3);
}

выходной CSS должен быть таким

      .bg-hero-pattern {
  background-image: url(../images/px1.gif?9ee64f464ce65b98bb9e4168105dc9b3);
}

Answer 1

добавлять ~ перед файлом пути

      theme: {
   extend: {
   backgroundImage: theme => ({
    'hero-pattern': "url('~/images/px1.gif')",
   })
   },
},

Answer 2

Надеюсь, этот ответ поможет тем, кто сталкивался с такой же проблемой, как я.

После нескольких исследований моего кода я нашел решение, и оно сработало для меня. Мне нужно добавить это processcssurls: true, в mix.Option. Вы можете узнать об этом здесь Параметры Laravel Mix