当前位置：首页 > news >正文

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

news 来源：原创 2025/5/16 14:11:11

在 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('获取系统信息失败')
    }
}