Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The NgOptimizedImage directive. Long path to the image triggers NG02952 warning. #55869

Open
Bohilc opened this issue May 18, 2024 · 0 comments
Labels
area: common Issues related to APIs in the @angular/common package common: image directive
Milestone

Comments

@Bohilc
Copy link

Bohilc commented May 18, 2024

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

When I use this part of code with a long path to the image (/assets/img/path1/path2/imgName.png):

  <div class="relative w-16 h-16">
    <img ngSrc="/assets/img/path1/path2/imgName.png"  alt="abyssal_impact" fill>
  </div>

I got a warning (beloved)
But when I copy this image to the short path (/assets/img/imgName.png) then I don't see this warning anymore:

  <div class="relative w-16 h-16">
    <img ngSrc="/assets/img/imgName.png"  alt="abyssal_impact" fill>
  </div>

I have width, height and position: relative for the div element where tag img exists. Ang img has fill property.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

NG02952: The NgOptimizedImage directive (activated on an <img> element with the `ngSrc="assets/img/path1/path2/imgName.png"`) has detected that the height of the fill-mode image is zero. This is likely because the containing element does not have the CSS 'position' property set to one of the following: "relative", "fixed", or "absolute". To fix this problem, make sure the container element has the CSS 'position' property defined and the height of the element is not zero.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.7
Node: 21.6.2 (Unsupported)
Package Manager: npm 10.6.0
OS: darwin arm64

Angular: 17.3.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.7
@angular-devkit/build-angular   17.3.7
@angular-devkit/core            17.3.7
@angular-devkit/schematics      17.3.7
@angular/cli                    17.3.7
@angular/ssr                    17.3.7
@schematics/angular             17.3.7
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

Anything else?

No response

@pkozlowski-opensource pkozlowski-opensource added area: common Issues related to APIs in the @angular/common package common: image directive labels May 22, 2024
@ngbot ngbot bot modified the milestone: needsTriage May 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: common Issues related to APIs in the @angular/common package common: image directive
Projects
None yet
Development

No branches or pull requests

2 participants