Vue.js image import issue

### ✅ Solutions:

—

### ✅ **Option 1: Use relative paths instead of `@/`**

Assuming your component is in `src/components/SomeComponent.vue` and your images are in `src/assets/images/`, use:

const profileHis = new URL('../assets/images/www.freelancer.com_u_openeratech.png', import.meta.url).href;
const profileHis2 = new URL('../assets/images/work-records.png', import.meta.url).href;
const review1 = new URL('../assets/images/review1.png', import.meta.url).href;
// ... and so on

—

### ✅ **Option 2: Use `import` statements (Recommended for Vite)**

This is more Vite/Vue-friendly and works well with the asset pipeline:

import profileHis from '@/assets/images/www.freelancer.com_u_openeratech.png';
import profileHis2 from '@/assets/images/work-records.png';
import review1 from '@/assets/images/review1.png';
import review2 from '@/assets/images/review2.png';
import review3 from '@/assets/images/review3.png';
import review4 from '@/assets/images/review4.png';
import review5 from '@/assets/images/review5.png';

Then you can directly use them in your template or script:

<img :src="profileHis" alt="Profile" />

—

### 🔍 Why only the first one works?

Sometimes Vite's optimizer can resolve the first static `new URL()` call correctly, but it won't resolve subsequent ones if the alias `@` is not mapped properly in your `vite.config.js` for these kinds of dynamic imports.

—

### ✅ Bonus: Ensure alias is defined in `vite.config.js`

If you really want to use `@/assets/…` with `new URL()`, make sure your alias is configured like this:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

But still, **prefer using `import` for images**, as it gives better dev and build-time behavior.

—

Let me know which setup you're using (Vite, Webpack, Vue CLI), and I can tailor the fix further.