vue 引入图片

### Vue 3 中引入和使用图片资源的方法 在 Vue 3 项目中，由于构建工具的变化（如 Vite 或 Webpack），引入图片资源的方式也有所调整。以下是几种常见的方法来正确引入和使用图片资源： #### 方法一：通过 `import` 动态引入 可以利用 JavaScript 的模块化特性，在脚本部分导入图片路径并绑定到模板中的属性。 ```vue <template> <img :src="logo" alt="Logo"> </template> <script> import logo from "@/assets/logo.png"; export default { data() { return { logo, }; }, }; </script> ``` 这种方式适用于需要动态设置图片的情况，并且能够被现代打包工具识别和处理[^1]。 --- #### 方法二：通过 `require` 静态引入 虽然在某些情况下可能会遇到 `require is not defined` 的错误提示，但在支持 CommonJS 的环境中仍然有效。 ```vue <template> <img :src="logoUrl" alt="Logo"> </template> <script> export default { data() { return { logoUrl: require("@/assets/logo.png"), }; }, }; </script> ``` 需要注意的是，如果使用了 Vite 构建工具，则不推荐此方法，因为它可能引发兼容性问题[^2]。 --- #### 方法三：直接写入 HTML 属性 可以直接将相对路径或绝对路径嵌套至 `<img>` 标签的 `src` 属性中。 ```html <img src="@/assets/logo.png" alt="Logo"> ``` 这种方法简单直观，但对于复杂的场景或者需要动态切换图片时不够灵活[^3]。 --- #### 方法四：CSS 背景图形式引入 可以通过 CSS 的背景图像功能实现图片展示，尤其适合用于装饰性的图形设计。 ```css <style scoped> .div1 { width: 100px; height: 100px; background-image: url('@/assets/logo.png'); background-size: cover; } </style> <template> <div class="div1"></div> </template> ``` 这种技术特别适合不需要交互操作的纯视觉效果需求[^4]。 --- #### 注意事项 当采用不同的引入策略时，请注意以下几点： - 如果使用 **Vite** 进行开发，默认不再支持 `require()` 函数调用，应改用 ES Module 的语法结构。 - 对于生产环境部署而言，建议优化图片大小并通过懒加载提升性能表现。 - 图片文件通常存放在 `/public` 文件夹下作为公共资源访问；而组件内部使用的媒体素材则放置于 `/src/assets` 下更便于管理维护。 ---