diff --git a/storybook/config/main.js b/storybook/config/main.js
index ebb855792a77c5a8c33da9c378fab6c80438bcde..87bb80a880798ab269add7f182c007b4195eb92c 100644
--- a/storybook/config/main.js
+++ b/storybook/config/main.js
@@ -1,3 +1,4 @@
+const path = require('path');
 const IS_EE = require('../../config/helpers/is_ee_env');
 
 module.exports = {
@@ -15,4 +16,10 @@ module.exports = {
   docs: {
     autodocs: true,
   },
+  staticDirs: [
+    {
+      from: path.resolve(__dirname, '../../app/assets/images'),
+      to: '/assets/images',
+    },
+  ],
 };
diff --git a/storybook/config/webpack.config.js b/storybook/config/webpack.config.js
index 9a1087087c0f6b82e6536b0bace54e04f310ac19..44ef81c277a63be109eb3e4f732b33a79c2a7654 100644
--- a/storybook/config/webpack.config.js
+++ b/storybook/config/webpack.config.js
@@ -96,21 +96,36 @@ function sassSmartImporter(url, prev) {
   return null;
 }
 
+/**
+ * Custom function to check if file exists in assets path.
+ * @param {sass.types.String} url - The value of the Sass variable.
+ * @returns {sass.types.String} - The path to the asset.
+ */
+function checkAssetUrl(url) {
+  const urlString = url.getValue();
+  const filePath = path.resolve(__dirname, '../../app/assets/images', urlString);
+
+  // Return as is if it's a data URL.
+  if (urlString.startsWith('data:')) {
+    return new sass.types.String(`url('${urlString}')`);
+  }
+
+  // If the file exists, return the absolute file path.
+  if (existsSync(filePath)) {
+    return new sass.types.String(`url('/assets/images/${urlString}')`);
+  }
+
+  // Otherwise, return the placeholder.
+  return new sass.types.String(TRANSPARENT_1X1_PNG);
+}
+
 const sassLoaderOptions = {
   sassOptions: {
     functions: {
-      'image-url($url)': function sassImageUrlStub() {
-        return new sass.types.String(TRANSPARENT_1X1_PNG);
-      },
-      'asset_path($url)': function sassAssetPathStub() {
-        return new sass.types.String(TRANSPARENT_1X1_PNG);
-      },
-      'asset_url($url)': function sassAssetUrlStub() {
-        return new sass.types.String(TRANSPARENT_1X1_PNG);
-      },
-      'url($url)': function sassUrlStub() {
-        return new sass.types.String(TRANSPARENT_1X1_PNG);
-      },
+      'image-url($url)': checkAssetUrl,
+      'asset_path($url)': checkAssetUrl,
+      'asset_url($url)': checkAssetUrl,
+      'url($url)': checkAssetUrl,
     },
     includePaths: SASS_INCLUDE_PATHS,
     importer: sassSmartImporter,