image import in ejs

notes.md

@@ -68,10 +68,24 @@ Requirements
 
 ## Notes
 
-Now, when you import MyImage from '../img/my-image.png', that image will be processed and added to your output directory and the MyImage variable will contain the final url of that image after processing.
+### assets - jpgs, svgs, etc
-When using the css-loader, as shown above, a similar process will occur for url('../img/my-image.png') within your CSS. The loader will recognize this is a local file, and replace the '../img/my-image.png' path with the final path to the image in your output directory.
-The html-loader handles <img src="./my-image.png" /> in the same manner.
 
+loaded with webpack 5's asset modules.
+path to asset file is relative from the source file.
 assets are automatically inlined or exported as a resource based on file size.
 this  default size is 8kb. - can configure see [docs](https://webpack.js.org/guides/asset-modules/). 
 
+Now, when you import MyImage from '../img/my-image.png', that image will be processed and added to your output directory and the MyImage variable will contain the final url of that image after processing.
+When using the css-loader, as shown above, a similar process will occur for url('../img/my-image.png') within your CSS. The loader will recognize this is a local file, and replace the '../img/my-image.png' path with the final path to the image in your output directory.
+The html-loader handles <img src="./my-image.png" /> in the same manner.
+however, in the template files need to use:
+```
+<img src="<%=require('../img/my-img.jpg');%>">
+```
+
+javascript is the usual:
+```
+
+```
+
+

src/css/style.css

@@ -2,3 +2,4 @@
 @import 'variables.css';
 @import 'colors.css';
 @import 'base/base.css';
+

src/templates/partials/component.ejs

@@ -1,4 +1,4 @@
 <div class="component">
 	<p><%= text %></p>
-	<p>woot!</p>
+	<img src="<%=require('../../img/1.jpg');%>">
 </div>