diff --git a/components/doc/datatable/samples/productsdoc.js b/components/doc/datatable/samples/productsdoc.js
index d5eeba8b1a..706e006ac5 100644
--- a/components/doc/datatable/samples/productsdoc.js
+++ b/components/doc/datatable/samples/productsdoc.js
@@ -861,7 +861,7 @@ export default function ProductsDemo() {
     };
 
     const imageBodyTemplate = (rowData: Product) => {
-        return <img src={https://primefaces.org/cdn/primereact/images/product/\${rowData.image}} alt={rowData.image!} className="shadow-2 border-round" style={{ width: '64px' }} />;
+        return <img src={\`https://primefaces.org/cdn/primereact/images/product/\${rowData.image}\`} alt={rowData.image!} className="shadow-2 border-round" style={{ width: '64px' }} />;
     };
 
     const priceBodyTemplate = (rowData: Product) => {
@@ -959,7 +959,7 @@ export default function ProductsDemo() {
             </div>
 
             <Dialog visible={productDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Product Details" modal className="p-fluid" footer={productDialogFooter} onHide={hideDialog}>
-                {product.image && <img src={https://primefaces.org/cdn/primereact/images/product/\${product.image}} alt={product.image} className="product-image block m-auto pb-3" />}
+                {product.image && <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.image} className="product-image block m-auto pb-3" />}
                 <div className="field">
                     <label htmlFor="name" className="font-bold">
                         Name