【Docker環境+Laravel10+vite】SCSSで指定した画像が表示されない

Question

実現したいこと

SCSSで指定した背景画像を開発環境（http://localhost/）で表示したい。

発生している問題・分からないこと

DockerにてLaravel10（vite）環境を構築しています。
SCSSで指定したbackground-imageが表示されず。。
はじめてvite環境を触るのでご知見お借りしたいです。

■事象
SCSSでbackground-imageにpublic/img配下に設置した画像を指定しました。

.icn-selectbox {
    background-image: url(/img/arrow-selectbox.svg);
}

ブラウザで確認したところ、指定した画像のパスが「http://localhost:5173/img/arrow-selectbox.svg」となっていました。

http://localhost:5173を参照するのではなくhttp://localhostを参照するように何かしらしなければならないのか、もしくはhttp://localhost:5173を参照していること自体はあっているのかがわからず、対応方法が不明です。

調べるとvite.config.jsのserverのオプションでhostという記載を多く見かけたのですが、解決できませんでした。

ご教示いただけますと幸いです。
不足している情報等ございましたらお申し付けください。
よろしくお願いいたします。

該当のソースコード

.selectbox { background-image: url(/img/arrow-selectbox.svg);}

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/scss/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    server: {
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true,
        },
    },
});

services:
  app:
    container_name: app
    build: ./docker/php
    volumes:
      - .:/var/www
    ports:
      - 5173:5173
  nginx:
    image: nginx
    container_name: nginx
    ports:
      - 80:80
    volumes:
      - .:/var/www
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
    working_dir: /var/www
    depends_on:
      - app
  db:
    platform: linux/x86_64
    image: mysql:5.7
    container_name: db
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: database
      MYSQL_USER: db-user
      MYSQL_PASSWORD: db-pass
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - ./docker/db/data:/var/lib/mysql
      - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
      - 3306:3306
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
    links:
      - db
    ports:
      - 8081:80
    volumes:
      - /sessions
volumes:
  mysql-data:

docker-compose.yml
app
└ public
　└ img
　　└ arrow-selectbox.svg
└ resources
　└ scss
　　└ common.scss
└ vite.config.js

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

• 画像の指定を相対パスに変更→ルートは変わらないので意味なしでした
• viteの設定ファイルのserverにオプションを追加→変わらずでした

補足

[docker環境]
・nginx
・mysql

※docker-compose.ymlの内容も記載いたします。

Answer 1

resourcesにimgを配置することで解決しました。