Patch for virtual image paths #51
Description
Hey there, we had some issue with virtual image paths and had to apply this patch to make it work. This is not a perfect solution but just wanted to give a heads-up and maybe it can be fixed properly.
Looks like someone else had a similiar problem with fonts over here but that was never completed #20
diff --git a/node_modules/vite-plugin-storybook-nextjs/dist/index.cjs b/node_modules/vite-plugin-storybook-nextjs/dist/index.cjs
index fed31c0..8fce76c 100644
--- a/node_modules/vite-plugin-storybook-nextjs/dist/index.cjs
+++ b/node_modules/vite-plugin-storybook-nextjs/dist/index.cjs
@@ -2712,8 +2712,15 @@ function vitePluginNextImage(nextConfigResolver) {
}
if (includePattern2.test(source) && !excludeImporterPattern.test(importer ?? "") && !importer?.startsWith(virtualImage)) {
const isAbsolute = path2__default.default.isAbsolute(id);
- const imagePath = importer ? isAbsolute ? source : path2__default.default.join(path2__default.default.dirname(importer), source) : source;
- return `${virtualImage}?imagePath=${imagePath}`;
+ const isAtPath = id.startsWith('@');
+ const imagePath = importer ? (isAbsolute || isAtPath) ? source : path2__default.default.join(path2__default.default.dirname(importer), source) : source;
+ return `${virtualImage}?imagePath=${imagePath.replaceAll('\\', '/')}`;
}
if (id === "next/image" && importer !== virtualNextImage) {
return virtualNextImage;
diff --git a/node_modules/vite-plugin-storybook-nextjs/dist/index.js b/node_modules/vite-plugin-storybook-nextjs/dist/index.js
index 8c62226..0758c71 100644
--- a/node_modules/vite-plugin-storybook-nextjs/dist/index.js
+++ b/node_modules/vite-plugin-storybook-nextjs/dist/index.js
@@ -2679,8 +2679,14 @@ function vitePluginNextImage(nextConfigResolver) {
}
if (includePattern2.test(source) && !excludeImporterPattern.test(importer ?? "") && !importer?.startsWith(virtualImage)) {
const isAbsolute = path2.isAbsolute(id);
- const imagePath = importer ? isAbsolute ? source : path2.join(path2.dirname(importer), source) : source;
- return `${virtualImage}?imagePath=${imagePath}`;
+ const isAtPath = id.startsWith('@');
+ const imagePath = importer ? (isAbsolute || isAtPath) ? source : path2.join(path2.dirname(importer), source) : source;
+ return `${virtualImage}?imagePath=${imagePath.replaceAll('\\', '/')}`;
}
if (id === "next/image" && importer !== virtualNextImage) {
return virtualNextImage;