External Assets (images, svg files etc) do not load correctly when running the website in a docker container

[LuminousHustler]

What Happened?

When running the website in a docker container, external images and other assets fail to load. This makes it somewhat difficult to do web development, because the web pages do not accurately render in a browser.

This is what you see when the container is running:

Steps to Reproduce

Follow the instructions on this github on the contributions page, specifically the docker setup:

1. Install docker
2. Install docker-compose
3. Follow the instructions on the docker website to setup the user and user group permissions
4. Clone this repo
5. run $ cd ./dev && docker-compose up -d
6. Navigate to localhost:8000 in a browser

Expected Behavior

All external assets, including images render correctly.

OS Version

8.x (Circe)

OS Architecture

amd64 (on most hardwares)

Session Type

Classic Session (X11)

Software Version

Compiled from git

Log Output

rebecca@becky-desktop:~/git/website_draft$ cd ./dev && docker-compose up
Starting elementary-os-website ... done
Attaching to elementary-os-website
elementary-os-website    | Loading composer repositories with package information
elementary-os-website    | Updating dependencies
elementary-os-website    | Lock file operations: 0 installs, 1 update, 0 removals
elementary-os-website    |   - Upgrading composer/ca-bundle (1.5.9 => 1.5.10)
elementary-os-website    | Writing lock file
elementary-os-website    | Installing dependencies from lock file (including require-dev)
elementary-os-website    | Nothing to install, update or remove
elementary-os-website    | Generating autoload files
elementary-os-website    | 6 packages you are using are looking for funding.
elementary-os-website    | Use the `composer fund` command to find out more!
elementary-os-website    | No security vulnerability advisories found
elementary-os-website    | ./dev/entrypoint.sh: line 6: npm: command not found
elementary-os-website    | ./dev/entrypoint.sh: line 7: npm: command not found
elementary-os-website    | Starting nginx: nginx.
elementary-os-website    | [28-Dec-2025 14:26:21] NOTICE: fpm is running, pid 51
elementary-os-website    | [28-Dec-2025 14:26:21] NOTICE: ready to handle connections
elementary-os-website    | NOTICE: PHP message: The address 172.18.0.1 is not in the database.
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /index.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /403.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /403.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /403.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /403.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /403.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200
elementary-os-website    | 127.0.0.1 -  28/Dec/2025:14:26:39 +0000 "GET /404.php" 200

Hardware Info

N/A

[LuminousHustler]

As far as I can tell, assets are failing to load because they exist in directories which have different names than what is written in index.php. For example the logo location is in _images/. But index.php expects it in images/. This can be seen starting on line 85 of index.php:

    <section class="section--hero section--stretched">
      <div class="section__detail grid">
        <div class="whole">
          <h1 id="logotype" alt="elementary OS"><?php include __DIR__.'/images/logotype-os.svg'; ?></h1>
          <p><?php echo $sitewide['description']; ?></p>
        </div>
      </div>

This is what the container sees in the directory when running. (Working directory is defined in docker-compose.yml)

# ls
403.php  LICENSE.md   TRANSLATE.md  _lang     _templates  babel.config.json  code-of-conduct.php  developer.php  fonts		   index.php	  oem.php	     package.json  privacy.php	support.php    webpack.config.babel.js
404.php  README.md    _backend	    _scripts  _tests	  brand.php	     data		  docs		 get-involved.php  manifest.json  open-source.php    press.php	   router.php	team.php
410.php  SECURITY.md  _images	    _styles   api	  capnet-assist.php  dev		  favicon.ico	 gulpfile.mjs	   nginx.conf	  package-lock.json  previous.php  store.php	thank-you.php
# pwd      
/var/www/website
# ls /var/www/website/_images
brand	    docs	 get-involved  icons	       logomark.svg	logotype.png  oem	   pantheon	privacy-policy	slingshot  thirdparty-icons
bullet.svg  favicon.png  home	       launcher-icons  logotype-os.svg	menu.svg      open-source  preview.png	screenshots	team	   thirdparty-logos
# ls /var/www/website/images
ls: cannot access '/var/www/website/images': No such file or directory
#     

It's a bit out of my depth, but the path of least resistance may be to alias the directories with underscores in front of them in the DockerFile. Else symbolic links that are created within the container may be the way to go

[LuminousHustler]

As a temporary workaround, I've tried to patch my dockerfile locally to copy the contents of /_images/ to /var/www/website/ inside the container. But I'm assuming I'm doing this incorrectly because the directory is never created at the destination.

dockerfile

FROM composer:2.5 AS composer

FROM php:8.1-fpm

COPY --from=composer /usr/bin/composer /usr/bin/composer

RUN apt-get update \
    && apt-get upgrade -y \
    && apt-get install -y ca-certificates curl gnupg \
    && mkdir -p /etc/apt/keyrings \
    && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
    && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_18.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list > /dev/null \
    && rm -rf /var/lib/apt/lists/*

RUN apt-get update \
    && apt-get install -y git libicu-dev nodejs nginx libpng-dev libzip-dev \ 
    libwebp-dev unzip zip libxml2-dev libjpeg62-turbo-dev zlib1g-dev libfreetype6 libfreetype6-dev \
    && rm -rf /var/lib/apt/lists/*

RUN docker-php-ext-configure intl \
    && docker-php-ext-install intl

COPY ./dev/nginx.conf /etc/nginx/sites-enabled/default

COPY ./_images/* /var/www/website/images/
COPY ./_scripts/* /var/www/website/scripts/
COPY ./_lang/* /var/www/website/lang/
COPY ./_templates/* /var/www/website/templates/

WORKDIR /var/www/website

EXPOSE 80 443

ENTRYPOINT ["./dev/entrypoint.sh"]

But within the container, I don't get an images directory. Not sure what I'm doing wrong, but my preferred solution would actually be to symlink _images/ to images/ so that I don't duplicate the files, but the assets load without modifying index.php

# ls -l
total 956
-rw-r--r--  1 1000 1000    740 Dec 21 14:48 403.php
-rw-r--r--  1 1000 1000    800 Dec 21 14:48 404.php
-rw-r--r--  1 1000 1000   1280 Dec 21 14:48 410.php
-rw-r--r--  1 1000 1000   1085 Dec 21 14:48 LICENSE.md
-rw-r--r--  1 1000 1000   2023 Dec 21 14:48 README.md
-rw-r--r--  1 1000 1000    347 Dec 21 14:48 SECURITY.md
-rw-r--r--  1 1000 1000   2725 Dec 21 14:48 TRANSLATE.md
drwxr-xr-x  5 1000 1000   4096 Dec 28 17:58 _backend
drwxr-xr-x 17 1000 1000   4096 Dec 21 14:48 _images
drwxr-xr-x 37 1000 1000   4096 Dec 21 14:48 _lang
drwxr-xr-x  5 1000 1000   4096 Dec 21 14:48 _scripts
drwxr-xr-x  2 1000 1000   4096 Dec 21 14:48 _styles
drwxr-xr-x  2 1000 1000   4096 Dec 21 14:48 _templates
drwxr-xr-x  2 1000 1000   4096 Dec 21 14:48 _tests
drwxr-xr-x  2 1000 1000   4096 Dec 21 14:48 api
-rw-r--r--  1 1000 1000    191 Dec 21 14:48 babel.config.json
-rw-r--r--  1 1000 1000  24875 Dec 21 14:48 brand.php
-rw-r--r--  1 1000 1000   1021 Dec 21 14:48 capnet-assist.php
-rw-r--r--  1 1000 1000   7604 Dec 21 14:48 code-of-conduct.php
drwxr-xr-x  2 1000 1000   4096 Dec 21 14:48 data
drwxr-xr-x  2 1000 1000   4096 Dec 28 19:02 dev
-rw-r--r--  1 1000 1000     70 Dec 21 14:48 developer.php
drwxr-xr-x  4 1000 1000   4096 Dec 21 14:48 docs
-rw-r--r--  1 1000 1000  67646 Dec 21 14:48 favicon.ico
drwxr-xr-x  2 1000 1000   4096 Dec 21 14:48 fonts
-rw-r--r--  1 1000 1000  10837 Dec 27 19:13 get-involved.php
-rw-r--r--  1 1000 1000   4644 Dec 21 14:48 gulpfile.mjs
-rw-rw-r--  1 1000 1000  27705 Dec 28 18:59 index.php
-rw-rw-r--  1 1000 1000  27705 Dec 28 18:49 index.php~
-rw-r--r--  1 1000 1000    313 Dec 21 14:48 manifest.json
-rw-r--r--  1 1000 1000   2664 Dec 21 14:48 nginx.conf
-rw-r--r--  1 1000 1000   6899 Dec 21 14:48 oem.php
-rw-r--r--  1 1000 1000  13808 Dec 21 14:48 open-source.php
-rw-rw-r--  1 1000 1000 617783 Dec 26 15:18 package-lock.json
-rw-rw-r--  1 1000 1000   1684 Dec 26 15:18 package.json
-rw-r--r--  1 1000 1000   7247 Dec 21 14:48 press.php
-rw-r--r--  1 1000 1000   2497 Dec 21 14:48 previous.php
-rw-r--r--  1 1000 1000   7176 Dec 21 14:48 privacy.php
-rw-r--r--  1 1000 1000   1622 Dec 21 14:48 router.php
-rw-r--r--  1 1000 1000     66 Dec 21 14:48 store.php
-rw-r--r--  1 1000 1000   6713 Dec 21 14:48 support.php
-rw-r--r--  1 1000 1000     80 Dec 21 14:48 team.php
-rw-r--r--  1 1000 1000    854 Dec 21 14:48 thank-you.php
-rw-r--r--  1 1000 1000   1674 Dec 21 14:48 webpack.config.babel.js