JHipster 8.1.0: JPG images don't show in production

[logicglobe]

Overview of the issue

JPG images don't show in production.

Motivation for or Use Case

I'd like to use JPG images.

Reproduce the error

Steps to reproduce

1. Create a simple monolithic JHipster project with Angular
2. Add a JPG to /src/main/webapp/content/images
3. Modify home.component.scss to use new image
4. Deploy into production
5. Image doesn't appear
6. Additional Observations

1. Create simple monolithic project

I created a simple monolithic project, myapp, with Gradle for the build tool, Angular front end, MariaDB for development and production: See the following .yo-rc.json file:

{
  "generator-jhipster": {
    "applicationIndex": 0,
    "applicationType": "monolith",
    "authenticationType": "jwt",
    "baseName": "myapp",
    "buildTool": "gradle",
    "cacheProvider": "ehcache",
    "clientFramework": "angular",
    "clientPackageManager": "npm",
    "clientTheme": "minty",
    "clientThemeVariant": "primary",
    "databaseType": "sql",
    "devDatabaseType": "mariadb",
    "devServerPort": 4200,
    "enableHibernateCache": true,
    "enableTranslation": true,
    "entities": [],
    "jhipsterVersion": "8.1.0",
    "jwtSecretKey": "YTdiMTIwYjUwNzI1NzUwYTI3ODFkZTBlYTg5MWI4NGY3ZTRlMThlOGE1YjdhN2M3MjdhZWNjOTBkNzNkYTUwMzIwNDljMDhhNDBhNjQ0OGM4OGY2OTk4ZjE1YmEyNDVkMTU2ZmY4ODc5OTBiNDliYTczMWJjMWM4ODg5MTUzMjI=",
    "languages": ["en", "es"],
    "nativeLanguage": "en",
    "packageFolder": "com/mycompany/app",
    "packageName": "com.mycompany.app",
    "prodDatabaseType": "mariadb",
    "testFrameworks": ["cypress"],
    "withAdminUi": true
  }
}

After project creation, added necessary database username/password to application.yml, liquibase.gradle, etc.

2. Add a JPG to images directory

Added a simple JPG image to the /src/main/webapp/content/images directory. The image I used is attached.

3. Modify home.component.scss to use new image

Modified /src/main/webapp/app/home/home.component.scss to use the JPG image as follows:

.reading {
  display: inline-block;
  width: 347px;
  height: 497px;
  background: url('../../content/images/library.jpg') no-repeat center top;
  background-size: contain;
}

/* wait autoprefixer update to allow simple generation of high pixel density media query */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (-moz-min-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  .reading {
    background: url('../../content/images/library.jpg') no-repeat center top;
    background-size: contain;
  }
}

4. Deploy into production

Deployed the application into production:

• Build production JAR: ./gradlew -Pprod clean bootJar
• Copy generated JAR to server
• Rename JAR to myapp.jar
• Launch application: java -jar myapp.jar
• Navigate to home page in browser: http://localhost:8080

5. Image doesn't appear

The image does not appear. Browser console error shows:

http://localhost:8080/library.7815297769ec24a8.jpg  [HTTP/1.1 401 Unauthorized 9ms]

6. Observations

Some observations:

• While the application is running in production, I can access the image directly in the browser: http://localhost:8080/content/images/library.jpg
• In development, I can see the JPG
• If I repeat the above steps but with a PNG version of the same image, the PNG image appears in production without issue.
• There was no issue using JPG images in production for JHipster 7.9.3 and earlier.

Related issues

None.

Suggest a Fix

No idea...

JHipster Version(s)

8.1.0

JHipster configuration

See steps above.

Entity configuration(s) entityName.json files generated in the .jhipster directory

No entities generated (except the core ones).

Browsers and Operating System

• openSUSE 15.5 and Windows 10
• Firefox 121.0.1 and Chrome 120.0.6099.217
• IntelliJ 2023.3.2
• Gradle 8.5
• Node 18.19.0
• Java 21.0.1+12
• MariaDB 11.2.2

• [x] Checking this box is mandatory (this is just to show you read everything)

[mshima]

That's not a bug, but a design decision. The image is part of the compilation, it's optimized and moved to the outputPath.

You have a few options:

1. allow anonymous access to jpg files at https://github.com/jhipster/generator-jhipster/blob/b9634b9be97d7602268bf45285856e320ccd0d91/generators/server/templates/src/main/java/_package_/config/SecurityConfiguration_imperative.java.ejs#L193

2. use an absolute path to access `/content/images/library.jpg

We only provide anonymous access to assets we provide and we don't provide any jpg files by default.

[logicglobe]

Added mvc.pattern("/*.jpg") to SecurityConfiguration.java and... HEY PRESTO! Problem solved!!

Thanks for everything @mshima

[mraible]

FWIW, Spring Security changed its behavior between Spring Boot 2 and 3. Spring Boot 2 (aka JHipster 7) was allow by default. Spring Boot 3 is deny by default.

[logicglobe]

Important info. Thanks @mraible