Nrwl Storybook React Not Rending Images - reactjs

Question

I have a react project built with Nrwl. I just noticed that all the images in my components are not loading. I researched a bit tried different techniques but couldn't fix it. I have these files for example
libs/src/lib/components/Nav/Nav.tsx
import React, { FC, MouseEvent } from "react";
import NavStyled from "./Nav.style";
export const Nav: FC<NavProps> = ({ click }: NavProps) => {
return (
<NavStyled>
<div className="nav__container">
<a className="logo" href="/">
<img src="../../assets/icons/logo.svg"/>
</a>
</div>
</NavStyled>
);
};
export default Nav;
libs/src/lib/components/Nav/Nav.stories.tsx
import React from "react";
import Nav from "./Nav";
export default {
component: Nav,
title: "Components/Nav"
};
export const defaultStory = () => <Nav />;
libs/storybook/.storybook/webpack/config.js
const rootWebpackConfig = require("../../../.storybook/webpack.config");
// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
config = await rootWebpackConfig({ config, mode });
config.resolve.extensions.push(".tsx");
config.resolve.extensions.push(".ts");
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve("babel-loader"),
options: {
presets: [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
]
}
});
return config;
};
.storybook/webpack.config.js
module.exports = async ({ config, mode }) => {
config.module.rules.push({
test: /\.stories\.tsx?$/,
loaders: [
{
loader: require.resolve("#storybook/source-loader"),
options: { parser: "typescript" }
}
],
enforce: "pre"
});
return config;
};
and I run the storybook using
nx run storybook:storybok

Answer 1

I think you're not using any image loader, you can try this loaded by adding this to your webpack config file.
const svgToMiniDataURI = require('mini-svg-data-uri');
const rootWebpackConfig = require("../../../.storybook/webpack.config");
// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
config = await rootWebpackConfig({ config, mode });
config.resolve.extensions.push(".tsx");
config.resolve.extensions.push(".ts");
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve("babel-loader"),
options: {
presets: [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
]
},
test: /\.(png|svg|jpg|gif)$/,
loader: 'url-loader',
options: {
limit: true,
generator: content => svgToMiniDataURI(content.toString()),
},
});
return config;
};