[GH-ISSUE #1074] Images are displayed only in development environment #503

New issue

Closed

opened 2026-03-03 14:38:51 +03:00 by kerem · 1 comment

kerem commented

2026-03-03 14:38:51 +03:00

Owner

Originally created by @msuliq on GitHub (Jan 17, 2023).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/1074

Hello, first of all, thanks for the awesome library!
I have found an issue when the flags do not render in production but render in development mode on my Rails 6 app.
Library is imported within application.scss file:
@import "flag-icons/css/flag-icons.min.css";

My package.json looks like below:
{ "dependencies": { "@hotwired/stimulus": "^3.2.1", "@hotwired/turbo-rails": "^7.2.4", "@popperjs/core": "^2.9.3", "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/request.js": "^0.0.6", "@rails/ujs": "^7.0.0", "autoprefixer": "^10.4.0", "cssnano": "^5.1.7", "esbuild": "^0.14.8", "esbuild-rails": "^1.0.3", "events": "^3.3.0", "flag-icons": "^6.6.6", "jquery": "^3.6.0", "postcss": "^8.4.4", "postcss-advanced-variables": "^3.0.1", "postcss-assets": "^6.0.0", "postcss-cli": "^9.1.0", "postcss-copy-assets": "^0.3.1", "postcss-easy-import": "^3.0.0", "postcss-flexbugs-fixes": "^5.0.2", "postcss-import": "^14.0.2", "postcss-inline-svg": "^5.0.0", "postcss-nested": "^5.0.6", "postcss-nesting": "^10.1.0", "postcss-preset-env": "^7.0.1", "postcss-scss": "^4.0.2", "postcss-url": "^10.1.3", "sass": "^1.44.0", }, "version": "0.1.0", "scripts": { "build:css": "NODE_ENV=${RAILS_ENV:-development} postcss ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css", "build": "NODE_ENV=${RAILS_ENV:-development} node esbuild.config.js" } }

When I run rake assets:precompile locally, I get the following warnings:

yarn install v1.22.4
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.43s.
yarn run v1.22.4
$ NODE_ENV=${RAILS_ENV:-development} postcss ./app/assets/stylesheets/application.scss  -o ./app/assets/builds/application.css
<!-- then about 500+ lines of warning like following ones -->

1:27153	⚠  Can't read asset file "/Users/xxx/xxx/app/assets/flags/1x1/ta.svg". Ignoring. [postcss-copy-assets]
1:27202	⚠  Can't read asset file "/Users/xxx/xxx/app/assets/flags/4x3/un.svg". Ignoring. [postcss-copy-assets]
1:27255	⚠  Can't read asset file "/Users/xxx/xxx/app/assets/flags/1x1/un.svg". Ignoring. [postcss-copy-assets]
1:27304	⚠  Can't read asset file "/Users/xxx/xxx/app/assets/flags/4x3/xk.svg". Ignoring. [postcss-copy-assets]
1:27357	⚠  Can't read asset file "/Users/xxx/xxx/app/assets/flags/1x1/xk.svg". Ignoring. [postcss-copy-assets]
919:3	⚠  Can't read asset file "/Users/xxx/xxx/app/assets/img/flags.png". Ignoring. [postcss-copy-assets]
925:7	⚠  Can't read asset file "/Users/xxx/xxx/app/assets/img/flags@2x.png". Ignoring. [postcss-copy-assets]

✨  Done in 11.19s.
yarn install v1.22.4
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.45s.
yarn run v1.22.4
$ NODE_ENV=${RAILS_ENV:-development} node esbuild.config.js
✨  Done in 0.58s.
yarn install v1.22.4
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.52s.

Regardless of the warning, the flags images are showing perfectly fine on my localhost, however, if I push these changes to a live server, the image files are not displayed. And are displayed only in case I add the flag icon .svg files into the app/assets/flags/ directory as mentioned in the warning.
So far I am thinking that postcss is somehow involved in this issue but I am not completely confident about it.

Let me know if you need any additional information or clarifications.
Thank you in advance for your time and help, really appreciate it.

Originally created by @msuliq on GitHub (Jan 17, 2023). Original GitHub issue: https://github.com/lipis/flag-icons/issues/1074 Hello, first of all, thanks for the awesome library! I have found an issue when the flags do not render in production but render in development mode on my Rails 6 app. Library is imported within application.scss file: `@import "flag-icons/css/flag-icons.min.css";` My package.json looks like below: `{ "dependencies": { "@hotwired/stimulus": "^3.2.1", "@hotwired/turbo-rails": "^7.2.4", "@popperjs/core": "^2.9.3", "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/request.js": "^0.0.6", "@rails/ujs": "^7.0.0", "autoprefixer": "^10.4.0", "cssnano": "^5.1.7", "esbuild": "^0.14.8", "esbuild-rails": "^1.0.3", "events": "^3.3.0", "flag-icons": "^6.6.6", "jquery": "^3.6.0", "postcss": "^8.4.4", "postcss-advanced-variables": "^3.0.1", "postcss-assets": "^6.0.0", "postcss-cli": "^9.1.0", "postcss-copy-assets": "^0.3.1", "postcss-easy-import": "^3.0.0", "postcss-flexbugs-fixes": "^5.0.2", "postcss-import": "^14.0.2", "postcss-inline-svg": "^5.0.0", "postcss-nested": "^5.0.6", "postcss-nesting": "^10.1.0", "postcss-preset-env": "^7.0.1", "postcss-scss": "^4.0.2", "postcss-url": "^10.1.3", "sass": "^1.44.0", }, "version": "0.1.0", "scripts": { "build:css": "NODE_ENV=${RAILS_ENV:-development} postcss ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css", "build": "NODE_ENV=${RAILS_ENV:-development} node esbuild.config.js" } } ` When I run `rake assets:precompile` locally, I get the following warnings: ``` yarn install v1.22.4 [1/4] 🔍 Resolving packages... success Already up-to-date. ✨ Done in 0.43s. yarn run v1.22.4 $ NODE_ENV=${RAILS_ENV:-development} postcss ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css  1:27153 ⚠ Can't read asset file "/Users/xxx/xxx/app/assets/flags/1x1/ta.svg". Ignoring. [postcss-copy-assets] 1:27202 ⚠ Can't read asset file "/Users/xxx/xxx/app/assets/flags/4x3/un.svg". Ignoring. [postcss-copy-assets] 1:27255 ⚠ Can't read asset file "/Users/xxx/xxx/app/assets/flags/1x1/un.svg". Ignoring. [postcss-copy-assets] 1:27304 ⚠ Can't read asset file "/Users/xxx/xxx/app/assets/flags/4x3/xk.svg". Ignoring. [postcss-copy-assets] 1:27357 ⚠ Can't read asset file "/Users/xxx/xxx/app/assets/flags/1x1/xk.svg". Ignoring. [postcss-copy-assets] 919:3 ⚠ Can't read asset file "/Users/xxx/xxx/app/assets/img/flags.png". Ignoring. [postcss-copy-assets] 925:7 ⚠ Can't read asset file "/Users/xxx/xxx/app/assets/img/flags@2x.png". Ignoring. [postcss-copy-assets] ✨ Done in 11.19s. yarn install v1.22.4 [1/4] 🔍 Resolving packages... success Already up-to-date. ✨ Done in 0.45s. yarn run v1.22.4 $ NODE_ENV=${RAILS_ENV:-development} node esbuild.config.js ✨ Done in 0.58s. yarn install v1.22.4 [1/4] 🔍 Resolving packages... success Already up-to-date. ✨ Done in 0.52s. ``` Regardless of the warning, the flags images are showing perfectly fine on my localhost, however, if I push these changes to a live server, the image files are not displayed. And are displayed only in case I add the flag icon .svg files into the `app/assets/flags/ directory` as mentioned in the warning. So far I am thinking that postcss is somehow involved in this issue but I am not completely confident about it. Let me know if you need any additional information or clarifications. Thank you in advance for your time and help, really appreciate it.

kerem

2026-03-03 14:38:51 +03:00

closed this issue
added the
help needed
label

kerem commented

2026-03-03 14:38:52 +03:00

Author

Owner

@DavidRecheni commented on GitHub (May 18, 2023):

Same issue here

Update:

Solved it by using the cdn instead of installing the library
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css" />

@DavidRecheni commented on GitHub (May 18, 2023): Same issue here --- Update: Solved it by using the cdn instead of installing the library `<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css" />`

kerem referenced this issue

2026-03-03 14:40:56 +03:00

[PR #503] [MERGED] Create convertSvgToAssetCatalog.sh #825