如何在React+Vite项目中配置图片Meta标签并解决构建后图片缺失问题

问题原因 #

Vite默认只会处理组件中通过import引入的资源，或者public文件夹下的静态资源。直接在index.html的meta标签里写src/assets/images/gcl.jpg这类项目相对路径时，Vite无法识别这是需要打包的资源，所以不会将其复制到dist文件夹中。

可行解决方案 #

方案一：将图片移至public文件夹 #

这是最简单的方式，Vite会自动把public目录下的文件原封不动拷贝到dist根目录：

• 把gcl.jpg放到项目根目录的public文件夹（没有则新建），比如路径为public/images/gcl.jpg
• 修改index.html中的meta标签：

  <meta property="og:image" content="/images/gcl.jpg" />
  

• 执行tsc && vite build后，图片会出现在dist/images/gcl.jpg，访问路径也能正常生效

方案二：通过Rollup插件手动指定要拷贝的资源 #

适合不想移动图片位置的场景，用rollup-plugin-copy插件强制拷贝资源：

1. 安装插件：

   npm install rollup-plugin-copy --save-dev
   

2. 修改vite.config.ts配置：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   import copy from 'rollup-plugin-copy';
   
   export default defineConfig({
     plugins: [
       react(),
       copy({
         targets: [
           { src: 'src/assets/images/gcl.jpg', dest: 'dist/assets/images' }
         ],
         hook: 'writeBundle' // 指定在构建完成后执行拷贝
       })
     ]
   });
   

3. 构建后图片会被复制到dist/assets/images/gcl.jpg，meta标签的路径无需修改（如果配置了Vite的base路径，需对应调整content的值）

方案三：在React组件中动态设置meta标签 #

这种方式能让Vite正常处理图片资源，还能自动生成带哈希的文件名优化缓存：

1. 在React组件（比如App.tsx）中引入图片并动态设置meta：

   import { useEffect } from 'react';
   import gclImage from './assets/images/gcl.jpg';
   
   function App() {
     useEffect(() => {
       // 查找已存在的og:image标签
       let ogImageMeta = document.querySelector('meta[property="og:image"]');
       if (!ogImageMeta) {
         // 不存在则创建新标签
         ogImageMeta = document.createElement('meta');
         ogImageMeta.setAttribute('property', 'og:image');
         document.head.appendChild(ogImageMeta);
       }
       // 设置打包后的图片路径
       ogImageMeta.setAttribute('content', gclImage);
     }, []);
   
     return <div>你的组件内容</div>;
   }
   
   export default App;
   

2. 构建后Vite会将图片处理为带哈希的文件（比如gcl.hash.jpg），meta标签的content会自动替换为正确的路径

内容的提问来源于stack exchange，提问作者Yuriy G