Vue Gotcha #1: Rendering image asset paths from a list of objects?

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

Cheers!

If you found this post was helpful

Reference:

Img :src="require(url)" not working