vue使用图片的四种类型详解

<template>
  <img src="/images/logo.png" alt="logo" />
    //或者
  //<img src="@asstes/images/logo.png" alt="logo" />
</template>

<template>
  <img :src="imageUrl" alt="Dynamic Image" />
</template>
<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg', // 可来自接口或组件状态
    };
  },
};
//如果使用此种方式还是不显示图片的话可以使用import 引用 (一般使用静态资源时未能获取到绝对路径)
import img1 from "@/asstes/img/picter1.png"
export default {
  data() {
    return {
      imageUrl: img1, // 可来自接口或组件状态
    };
  },
};
</script>

<template>
  <!-- 方式 1：在模板中直接 require -->
  <img :src="require('@/assets/images/logo.png')" alt="Logo" />
  <!-- 方式 2：在数据中提前引入 -->
  <img :src="logoImg" alt="Logo" />
</template>
<script>
export default {
  data() {
    return {
      // 方式 2：在 data 中通过 import 或 require 引入
      logoImg: require('@/assets/images/logo.png'),
      // 或：import logoImg from '@/assets/images/logo.png';
    };
  },
};
</script>

<!-- 自定义图片组件 -->
<template>
  <div class="image-container">
    <img 
      :src="src" 
      :alt="alt" 
      @load="onLoad" 
      @error="onError"
    />
    <!-- 加载中提示 -->
    <div v-show="loading" class="loading">Loading...</div>
    <!-- 错误提示 -->
    <div v-show="error" class="error">图片加载失败</div>
  </div>
</template>
<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    alt: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: true,
      error: false,
    };
  },
  methods: {
    onLoad() {
      this.loading = false;
    },
    onError() {
      this.error = true;
      this.loading = false;
    },
  },
};
</script>

<template>
  <CustomImage 
    src="https://example.com/image.jpg" 
    alt="Custom Image"
  />
</template>

<!-- 直接引入 SVG -->
<template>
  <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2L1 21h22L12 2z" fill="currentColor" />
  </svg>
</template>
<!-- 使用 vue-svg-icon 组件 -->
<template>
  <svg-icon name="home" />
</template>
<script>
import { SvgIcon } from 'vue-svg-icon/ssr';
export default {
  components: {
    SvgIcon,
  },
};
</script>

<!-- 安装插件：npm install vue-lazyload -->
<template>
  <img v-lazy="imageUrl" alt="Lazy Image" />
</template>
<script>
import VueLazyload from 'vue-lazyload';
export default {
  directives: {
    lazy: VueLazyload,
  },
  data() {
    return {
      imageUrl: 'https://example.com/large-image.jpg',
    };
  },
};
</script>

Vue.use(VueLazyload, {
  loading: require('@/assets/loading.gif'), // 加载中占位图
  error: require('@/assets/error.jpg'), // 加载失败占位图
});

<script setup lang="ts">
interface StatsCardProps {
  title?: string;
  color?: string;
  // 其他props...
}
// defineProps<StatsCardProps>() 会生成：
// - 类型定义：props.title 类型为 string | undefined
// - 运行时：等价于 props: { title: String, color: String }
</script>
<template>
  <div :style="{ backgroundColor: color }">{{ title }}</div> <!-- 直接使用props -->
</template>

<cardList
              :id="card.id"
              :title="card.title"
              :color="card.color"
            />