The primary focus of this week should be test-driven development, including writing more complex business logic along with tests. However, many students also want to incorporate images into their projects. While this should be a lower priority than TDD development (and adding images isn't required for this section's project), you are welcome to experiment with adding images if you have completed other key aspects of your project.
Now that we are using webpack as a module bundler, all of our source code is being combined in a single dist
folder. For that reason, we need to use webpack to manage images and correctly add them to our dist
directory.
We'll need to add several packages to manage images with webpack. First, we'll install the file-loader package:
$ npm install [email protected] --save-dev
Next, we'll install the html-loader package:
$ npm install [email protected] --save-dev
Finally, we need to configure webpack to use these new tools. We'll create two new entries in the rules
array within the module
object of webpack.config.js
:
...
{
test: /\.(gif|png|jpe?g)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images/'
}
}
]
},
{
test:/\.html$/,
use: [
'html-loader'
]
},
...
Let's walk through this new code:
The first test
section states which file types this loader will be applied to. We list /\.(gif|png|jpe?g)$/
to instruct webpack to handle .gif
, .png
, .jpg
and .jpeg
extensions.
use
specifies file-loader
as the webpack loader responsible for handling these file types. Because this dependency has more settings than other loaders, we add an options
object with additional settings in key-value pairs:
name
tells webpack what to name the image file it places in dist
. By stating [name].[ext]
, we tell it to simply use the file's existing name and extension.outputPath
tells it where in dist
it should place this image.The second test
section begins a new rule for .html
files.
The value corresponding to the use
key in this rule states .html
file types should have our new html-loader
applied to them. As stated in this loader's GitHub Documentation, this dependency invokes webpack to load the corresponding image resource for any <img>
tags it spots in our HTML.
We can now begin adding images to our site. There's no strict, universal rule for where to place image files. However, it's common practice to house resources such as images, fonts, and icons in an assets
directory that contains corresponding subdirectories for each type of resource (such as assets/images
and assets/fonts
). assets/images
is also where we programmed webpack to look for images in configurations above. Create this directory and subdirectory now.
Next, we'll add an image. For this example we'll download this free stock image of a puppy from Unsplash.com and save it in a file named stock-puppy-photo.jpg
in our assets/images
directory.
Now let's add our image to our HTML so we can see it in the browser. We'll add the following <img>
tag to index.html
:
<html lang="en-US">
<head>
</head>
<body>
<div>Hello world!</div>
<img src="assets/images/stock-puppy-photo.jpg" alt="such a pup!">
</body>
</html>
We link to location of our new image and add an alt
property.
Let's see our new image in action. Restart the project's development server (if it's open) and run $ npm run start
.
Lesson 43 of 46
Last updated more than 3 months ago.