CODEWITHSUNDEEP
sap-commerce-cloudspartacus-storefront
Billy Remake
Billy Remake

Reputation: 35

Change Missing Media Image in cx-media Component

How do i change the Missing Media Image in cx-media Component?

I tryed to just override the cx-media component but it feels like that is the wrong approach. My custom component has this html code:

<img
      *ngIf="media?.src, else img"
      [attr.src]="media.src"
      [attr.srcset]="media.srcset"
      [attr.alt]="media.alt"
      [attr.role]="media.role"
      [attr.loading]="loadingStrategy"
      (load)="loadHandler()"
      (error)="errorHandler()"
    />
    <ng-template #img>
      <img src="someURL">
    </ng-template>

Now i need to tell Spartacus to use it in the .module instead of the out of the box component. Somthink like this:

providers: [
    provideConfig(<CmsConfig>{
        cmsComponents: {
          MediaComponent : {
            component: MyComponent
          },
        },
      }),
  ]

This however doesn't work. I think i use the wrong cmsComponent selector. Were do i find the right name?

I kind of feel there must be a way better way to do this. Thanks for any help :)

Upvotes: 0

Views: 432

Answers (1)

Caine Rotherham
Caine Rotherham

Reputation: 306

The default media image is controlled by the is-missing class in css. You can instead override this class's background image to change the missing src default picture shown.

This is also mentioned in the documentation: 'https://sap.github.io/spartacus-docs/media-component/#missing-media'

Upvotes: 1

Related Questions