在 Vue 项目中引入静态图片有多种方式

在 Vue 项目中引入静态图片有多种方式，具体取决于你的项目结构和使用的构建工具（如 Vite、Webpack 等）。以下是几种常见的方法：

---

1. 将图片放在 public 目录下

如果你的项目使用的是 Vite 或者其他现代前端构建工具，通常会有一个 public 目录。这个目录下的文件会被直接复制到构建输出目录中，因此可以直接通过相对路径引用。

步骤：

• 将 logo.png 放在 public/image/ 目录下。
• 在代码中直接使用相对路径引用图片。

const companyInfo = reactive({
    companyLogo: '/image/logo.png',
    companyName: 'NTV GBS',
    productVersion: '3.0'
})

在模板中：

<img :src="companyLogo" alt="logo" class="logo">

---

2. 将图片放在 src/assets 目录下

如果图片放在 src/assets 目录下，需要使用 import 语句来引入图片，并将其赋值给一个变量。

步骤：

• 将 logo.png 放在 src/assets/ 目录下。
• 使用 import 语句引入图片。

import logo from '@/assets/logo.png'

const companyInfo = reactive({
    companyLogo: logo,
    companyName: 'NTV GBS',
    productVersion: '3.0'
})

在模板中：

<img :src="companyLogo" alt="logo" class="logo">

---

3. 使用环境变量

如果你希望在不同环境下使用不同的图片路径（例如开发环境和生产环境），可以使用环境变量。

步骤：

• 在 .env.development 文件中定义一个环境变量：

VITE_LOGO_URL=/image/logo.png

• 在代码中引用：

const companyInfo = reactive({
    companyLogo: import.meta.env.VITE_LOGO_URL,
    companyName: 'NTV GBS',
    productVersion: '3.0'
})

---

4. 动态拼接 URL

如果 logo 是从接口获取的相对路径，可以在代码中动态拼接完整的 URL。

步骤：

• 在接口返回的数据中获取 logo 的相对路径。
• 动态拼接完整的 URL。

const getSystemVersion = async () => {
    try {
        const data = await request.get('/api/system/version')
        if (data.code === 0) {
            const { name, version, logo, branch } = data.data.items[0]
            companyInfo.companyName = name
            companyInfo.productVersion = version
            companyInfo.companyLogo = logo ? `${import.meta.env.VITE_API_BASE_URL}${logo}` : '/image/logo.png'
            showCloudFeatures.value = branch === 'cloud'
        }
    } catch (error) {
        console.error('获取系统信息失败:', error)
        ElMessage.error('获取系统信息失败')
    }
}

---

5. 检查和调试

• 确保图片路径正确并存在。
• 打开浏览器开发者工具，检查网络请求，查看图片请求是否成功。
• 检查控制台是否有错误信息，帮助定位问题。

---

总结

• 将图片放在 public 目录下，直接使用相对路径引用。
• 将图片放在 src/assets 目录下，使用 import 语句引入。
• 使用环境变量区分不同环境下的图片路径。
• 动态拼接 URL 处理从接口获取的相对路径。
• 检查和调试以确保图片能够正常显示。

通过以上步骤，你可以正确引入并显示静态图片。