I'm using Angular 18 and Tailwind v14, and I have an issue with displaying images (such as a logo). When I set the correct path for the image, Angular can't seem to find it.
The issue:
I correctly specify the image path in the tag, but it doesn't display.
The same project worked fine with an older version of Tailwind (before the update).
Code snippets:
Here's my angular.json configuration for assets:
"assets": [
{
"glob": "**/*",
"input": "public"
}
]
"styles": [
"src/styles.css"
],
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.css"
],
The image is located in the public folder.
What I've checked:
The image path seems correct (public/images/logo.png).
The image was displayed without issues in the older version of Tailwind.
I suspect the issue may be related to Tailwind (v14), but I’m not sure if it's causing the problem.
Anyone facing the same issue or can point me in the right direction?
Verify the angular.json Assets Configuration.
Your angular.json has a duplicated assets section. Ensure it’s properly structured like this:
"assets": [
{
"glob": "**/*",
"input": "public",
"output": "/"
}
],
"styles": [
"src/styles.css"
]
Add "output": "/" to ensure files from public are copied to the root of the build output (dist/).