@@ -727,13 +727,15 @@ export class NgOptimizedImage implements OnInit, OnChanges {
   protected generatePlaceholder(placeholderInput: string | boolean): string | boolean | null {
     const {placeholderResolution} = this.config;
     if (placeholderInput === true) {
-      return `url(${this.callImageLoader({
-        src: this.ngSrc,
-        width: placeholderResolution,
-        isPlaceholder: true,
-      })})`;
+      return `url("${escapeCssUrl(
+        this.callImageLoader({
+          src: this.ngSrc,
+          width: placeholderResolution,
+          isPlaceholder: true,
+        }),
+      )}")`;
     } else if (typeof placeholderInput === 'string') {
-      return `url(${placeholderInput})`;
+      return `url("${escapeCssUrl(placeholderInput)}")`;
     }
     return null;
   }
@@ -1461,6 +1463,10 @@ function unwrapSafeUrl(value: string | SafeValue): string {
   return unwrapSafeValue(value);
 }
 
+function escapeCssUrl(input: string): string {
+  return input.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+
 // Transform function to handle inputs which may be booleans, strings, or string representations
 // of boolean values. Used for the placeholder attribute.
 export function booleanOrUrlAttribute(value: boolean | string): boolean | string {
 
@@ -1215,6 +1215,25 @@ describe('Image directive', () => {
       );
     });
 
+    it('should escape loader output when placeholder is provided as a boolean (security regression)', () => {
+      const maliciousLoader = (config: ImageLoaderConfig) => {
+        if (config.isPlaceholder) {
+          return 'https://mysite.com/img.png"); color: red;/*';
+        }
+        return `${IMG_BASE_URL}/${config.src}`;
+      };
+      setupTestingModule({imageLoader: maliciousLoader});
+      const template = '<img ngSrc="path/img.png" width="400" height="300" placeholder="true" />';
+
+      const fixture = createTestComponent(template);
+      fixture.detectChanges();
+
+      const imageDirective = fixture.debugElement.children[0].injector.get(NgOptimizedImage);
+      const placeholderValue = (imageDirective as any).generatePlaceholder(true) as string;
+
+      expect(placeholderValue).toBe('url("https://mysite.com/img.png\\"); color: red;/*")');
+    });
+
     if (!isNode) {
       // DataURLs get stripped from background-image attribute in Node, but not browsers.
       it('should add a background-image tag when placeholder is provided as a data URL', () => {
@@ -1264,6 +1283,22 @@ describe('Image directive', () => {
       );
     });
 
+    it('should prevent CSS injection through placeholder URL values', () => {
+      setupTestingModule({imageLoader});
+      const maliciousPlaceholder = 'https://mysite.com/img.png"); color: red;';
+      const template = `<img ngSrc="path/img.png" width="400" height="300" placeholder='${maliciousPlaceholder}' />`;
+
+      const fixture = createTestComponent(template);
+      fixture.detectChanges();
+
+      const imageDirective = fixture.debugElement.children[0].injector.get(NgOptimizedImage);
+      const placeholderValue = (imageDirective as any).generatePlaceholder(
+        maliciousPlaceholder,
+      ) as string;
+
+      expect(placeholderValue).toBe('url("https://mysite.com/img.png\\"); color: red;")');
+    });
+
     it('should add a background-image tag when placeholder is provided without value', () => {
       setupTestingModule({imageLoader});
       const template = '<img ngSrc="path/img.png" width="400" height="300" placeholder />';