Whenever your list of objects that contain image path from static or assets folder, you need to remember to render it with `require` before plugging the file path directly into :src.
Practical use case:
- List of objects containing one or more files from ~/assets or ~/static directory
Plugging in file path directly into `:src=”abc”` will work. However if you need to render multiple children containers with different image file paths, this approach may help you in achieving that.
Approach 1: GOOD
Include require at the base of each asset/static import. This will ensure that all paths are correctly retrieved.
Approach 2: WRONG and why?
You will receive an error of `No module found` because Webpack has no way to statically analyze this at build time.
Webpack needs you to restrict the amount of possible files by giving it a part of the path as a literal string, at least — or the whole path, in the best case.
If you have time and would like to dive into more details about require check out webpack here:
Dependency Management | webpack
A context is created if your request contains expressions, so the exact module is not known on compile time. Example…