image import in ejs
This commit is contained in:
parent
a20bee87d2
commit
8e6ad9fb42
20
notes.md
20
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.
|
||||
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:
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
|
|
@ -2,3 +2,4 @@
|
|||
@import 'variables.css';
|
||||
@import 'colors.css';
|
||||
@import 'base/base.css';
|
||||
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 171 KiB |
|
@ -1,4 +1,4 @@
|
|||
<div class="component">
|
||||
<p><%= text %></p>
|
||||
<p>woot!</p>
|
||||
<img src="<%=require('../../img/1.jpg');%>">
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue