image import in ejs

This commit is contained in:
Ray Elliott 2021-02-28 13:24:42 +00:00
parent a20bee87d2
commit 8e6ad9fb42
4 changed files with 19 additions and 4 deletions

View File

@ -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.
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.
### assets - jpgs, svgs, etc
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:
```
```

View File

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

BIN
src/img/1.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

View File

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