vue3引入静态图片

### Vue3 中引入静态图片的最佳实践 在 Vue3 项目中，正确引入静态图片资源的方式取决于这些资源存储的位置以及它们的用途。以下是几种常见方法及其适用场景： #### 方法一：使用 `public` 目录 如果图片是全局可用的静态文件（例如图标、背景图），可以将其放置在项目的 `public` 文件夹下。通过这种方式加载的图片可以直接通过根路径 `/` 进行访问。 ```html <template> <img src="/example-image.png" alt="Example Image"> </template> ``` 这种方法的优点在于简单易用，适合不需要经过 Webpack 处理的资源[^2]。 --- #### 方法二：使用 `assets` 目录并借助 Webpack 加载 对于需要被 Webpack 编译和优化的图片资源，推荐将它们放在 `src/assets` 文件夹下。此时可以通过相对路径或者模块化导入的方式来引用这些资源。 ##### 使用相对路径 ```html <template> <img :src="require('@/assets/example-image.png')" alt="Example Image"> </template> <script> export default { name: "ImageComponent", }; </script> ``` 注意，在模板语法中直接写死字符串路径可能会导致热更新失效或打包错误，因此建议配合 `require()` 动态解析路径[^2]。 ##### 使用 ES Module 导入 另一种更现代的方法是利用 JavaScript 的 `import` 语句提前声明依赖关系。 ```javascript // 在 script 部分定义变量 import exampleImage from '@/assets/example-image.png'; export default { data() { return { imageSrc: exampleImage }; }, }; <!-- 绑定到 img 标签 --> <img :src="imageSrc" alt="Example Image"> ``` 此方式不仅支持 Tree Shaking 和懒加载，还能够更好地兼容生产环境下的哈希命名机制。 --- #### 方法三：动态绑定图片地址 当图片路径由运行时数据决定时，则需采用计算属性或其他逻辑来生成最终 URL 地址。下面是一个基于配置对象的例子： ```vue <template> <!-- 判断条件渲染不同模式下的图像 --> <img v-if="headerConfig.displayMode === 'logo'" :src="headerConfig.logoUrl" /> </template> <script> export default { setup() { const headerConfig = reactive({ displayMode: 'logo', logoUrl: new URL('@/assets/logo.png', import.meta.url).href, }); return { headerConfig }; }, }; </script> ``` 这里运用了 `new URL()` 构造函数结合 `import.meta.url` 来获取相对于当前模块的工作目录位置[^1]。 --- #### 总结注意事项 - **开发阶段调试**：确保本地服务器已启动以便正确映射网络请求至实际物理文件； - **部署上线前测试**：验证构建后的产物是否保留原始链接有效性； - **性能考量**：针对频繁使用的素材考虑缓存策略；而对于大尺寸媒体则可能涉及 CDN 分发等问题。