Vue项目：使用require解析图片的存放位置及生效复制路径问询

1. Where to place images when using require() in Vue projects? #

When using require() to resolve image paths in Vue, you have two main recommended locations depending on your needs:

• src/assets directory: This is the conventional home for project-specific static assets. You can reference images here using the @ alias (which maps to the src folder) like require('@/assets/your-image.jpg'). Webpack will process these images—compress them, hash filenames for cache busting, etc.—during the build, which is ideal for production.
• public directory: If you put images here, you can reference them with require('/your-image.png') since the public folder acts as your app's root static asset folder. Note that images here won't be processed by Webpack; they'll retain their original names and paths, which is useful for static assets you don't want modified.
• Bonus: You can also place images directly in your component folders and use relative paths like require('./your-image.svg'), but this can get disorganized as your project scales, so sticking to src/assets or public is better for maintainability.

2. Where to copy Vue Bootstrap images to avoid modifying transformToRequire? #

Since you want to skip tweaking the transformToRequire config, the simplest, config-free approach is to use your project's public directory:

1. Create a public folder at the root of your myProject if it doesn't already exist.
2. Copy the Vue Bootstrap images into a subfolder inside public that matches the path used in the Vue Bootstrap code. For example, if the code uses <img src="/icons/arrow-right.png">, create public/icons and place arrow-right.png there.
3. This works because assets in public are served directly from the root URL, so the browser can load them without needing Webpack to resolve the path via require() or special configuration.

If you'd rather keep images in src/assets, you'd have to update each Vue Bootstrap image reference to use require() bindings (like <img :src="require('@/assets/icons/arrow-right.png')">), but that requires editing every image link—so the public folder is definitely the faster option here.

内容的提问来源于stack exchange，提问作者Fractal