vue 引入上级静态image

### 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 分发等问题。

### 如何在 Vue 项目中引入资源或依赖 #### 使用 `npm` 或 `yarn` 安装依赖包 为了向 Vue 项目添加新的依赖项，可以使用 npm 或 yarn 来安装这些库。例如，如果想要集成 axios 库用于 HTTP 请求，则可以在命令行执行如下操作： 对于 npm 用户： ```bash npm install axios --save ``` 对于 yarn 用户： ```bash yarn add axios ``` 一旦完成上述步骤，在项目的任何 JavaScript 文件里就可以通过 import 语句轻松访问该模块。 #### 将静态资源放置于合适位置并引用 当涉及到图片、字体或其他类型的资产时，通常会把它们放在 src/assets 文件夹下以便管理[^1]。比如有一张 logo.png 图片位于此路径内，那么便可在模板标签 `<template>` 中这样写入 HTML 属性绑定表达式来加载它： ```html <img :src="require('@/assets/logo.png')" alt="Logo"> ``` 注意这里用了 require 函数配合相对路径的方式指定资源的位置；这是因为在 Webpack 构建环境下处理这类非 js 类型文件的一种常见做法。 另外一种情况是在样式表里面定义背景图像之类的 CSS 属性值时也可以采用相同的方法： ```css body { background-image: url('~@/assets/background.jpg'); } ``` 这里的波浪线 ~ 符号告诉 Webpack 查找 node_modules 下面的内容，而 @ 则是指代 src 目录的一个别名设置。 #### 配置 package.json 添加自定义脚本 有时可能希望为特定的任务编写额外的 NPM 脚本来简化工作流程。这可以通过编辑根级别的 package.json 文件实现。假设有一个名为 serve 的服务端渲染应用服务器，可按下面所示结构扩展 scripts 字段： ```json { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "start": "node server.js" } } ``` 现在只需简单地运行 `npm run start` 即可启动 NodeJS Express Server 实例。 #### 推荐使用 Vite 替代传统工具链 鉴于官方推荐以及性能上的优势，考虑未来趋势的话应该优先选用 Vite 工具来进行现代前端工程化建设。相较于传统的打包器如 Webpack, Rollup 和 Parcel 等,Vite 提供了更快冷启动速度和热更新机制，并且内置了许多实用特性支持开箱即用[^2]。