Display image in Vue

### Example Structure:

src/
  assets/
    images/
      logo.png
  components/
    MyComponent.vue

### How to Display the Image:

<template>
  <div>
    <img :src="logo" alt="My Logo" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      logo: require('@/assets/images/logo.png')  // for Vue 2 or options API
    };
  }
};
</script>

### Or (in Vue 3 with “ or composition API):

<template>
  <div>
    <img :src="logoUrl" alt="My Logo" />
  </div>
</template>

<script setup>
const logoUrl = new URL('@/assets/images/logo.png', import.meta.url).href;
</script>

### Tips:
– `@` is a webpack alias for `src`, configured in most Vue projects.
– For **Vite**, use the `new URL(…, import.meta.url)` approach (especially in “).
– Make sure your image file is correctly named and located.

Let me know if you're using a specific build tool (Vue CLI, Vite, etc.) and I'll tailor the solution!

—

### ✅ Recommended Approach for Vite + Vue 3

Let’s say your folder structure is:

resources/
  js/
    Views/
      Home.vue
  assets/
    images/
      banner.jpg

Then in `Home.vue`:

<template>
  <div>
    <img :src="bannerImage" alt="Banner" />
  </div>
</template>

<script setup>
const bannerImage = new URL('@/assets/images/banner.jpg', import.meta.url).href;
</script>

—

### ✅ Alternate: Direct in Template (only works for static image paths)

<template>
  <img src="@/assets/images/banner.jpg" alt="Banner" />
</template>

But this might not resolve properly in all Vite setups—especially with dynamic images or if `@` isn't recognized in the template. So prefer the `new URL(…).href` method in “ for reliability.

—

Let me know if you're using a dynamic image (e.g. from a loop), or want to load images by filename from props — I can help with that too.

—

### ✅ Use `import.meta.url` with `new URL()` inline:

<template>
  <img :src="new URL('@/assets/images/banner.jpg', import.meta.url).href" alt="Banner" />
</template>

—

### ❌ This won’t work in Vite:

<!-- This is incorrect in Vite (only works in Webpack/Vue CLI setups) -->
<img src="@/assets/images/banner.jpg" alt="Banner" />

—

### 🔁 If you want to use it dynamically (for example in a loop):

<template>
  <img :src="getImageUrl('banner.jpg')" alt="Banner" />
</template>

<script setup>
function getImageUrl(filename) {
  return new URL(`@/assets/images/${filename}`, import.meta.url).href;
}
</script>

—

Let me know if you're referencing images dynamically (like from props or API), and I can help build that too.

The key point is:

> **You can't use `new URL(…)` directly in the template markup.** You must declare it in “ or regular “ and then bind it in the template.

—

### ✅ Correct Way (Vite + Vue 3 + TypeScript)

Move the `new URL(…)` call into the “ section, like this:

<template>
  <img :src="bannerImage" alt="Banner" />
</template>

<script setup lang="ts">
const bannerImage = new URL('@/assets/images/banner.jpg', import.meta.url).href;
</script>

—

### ❌ Do NOT do this (causes TS error in template):

<!-- ❌ This is what causes the TS error -->
<template>
  <img :src="new URL('@/assets/images/banner.jpg', import.meta.url).href" alt="Banner" />
</template>

TypeScript can't interpret `new URL(…)` directly inside the template context — Vue's template compiler expects basic expressions, not constructors like `new`.

—

Let me know if you're passing image names as props or looping through images — we can make a reusable helper for that too.