10、vue3中针对图片的处理

imkaifan2025-12-25 9:03

javascript 复制代码

<template>
  <div>
    <img :src="logo" alt="">
    <div v-html="logo1"></div>
    <h1>我的项目</h1>

    <div>
      <router-link to="/">首页</router-link>
      <router-link to="/login">登录</router-link>
      <router-link to="/about">关于</router-link>
      张卡饭
    </div>
    <router-view></router-view>
    <div>footer</div>
  </div>
</template>
<script setup>
import TodoList from './components/TodoList.vue'
import RateComponents from './components/RateComponents.vue'
import LearnTs from './components/LearnTs.vue'
import MyComposition from './components/MyComposition.vue'
import logo from './assets/logo.svg'
import logo1 from './assets/logo.svg?raw'
console.log('logo', logo)
console.log('logo1', logo1)
import {ref} from 'vue';
function update(res) {
  console.log(res)
}
</script>
<style lang="scss">
$primary-color: red;
$font-size: 20px;
h1 {
  color: $primary-color;
  font-size: $font-size;
}
</style>

根据情况来进行处理，第一种直接需要网络请求，当文件比较小的时候用第二种，这样可以不用请求加载资源