一、Vue2与Vue3中的图片引入方法

1. Vue2中的图片引入

<template>
  <img :src="src">
</template>
<script>
export default {
  data() {
    return {
      src: require('xxx.jpg')
    }
  }
}
</script>

2. Vue3中的图片引入

方法一:使用import语法导入资源

<script setup>
import imgSrc from 'xxx.jpg'
</script>
<template>
  <img :src="imgSrc">
</template>

方法二:使用new URL构造函数和import.meta.url

<script setup>
const imgSrc = new URL('xxx.jpg', import.meta.url).href
</script>
<template>
  <img :src="imgSrc">
</template>

二、简化图片导入过程

// assets/images/index.js
import amuse from './amuse.png';
import profession from './profession.png';
// 导入更多图片资源

export default {
  amuse,
  profession
  // 导出更多图片资源
};
import images from '@/assets/images/index.js';

console.log(images.amuse); // 使用amuse图片

这种方法避免了在每个文件中重复书写多个import语句,大大简化了代码。

三、动态导入图片

<template>
  <img :src="getImage(item.imgUrl)" alt="">
</template>
<script>
export default {
  data() {
    return {
      dataList: [{ imgUrl: 'xxx.jpg' }, { imgUrl: 'yyy.jpg' }]
    }
  },
  methods: {
    getImage(url) {
      return require(`@/assets/images/${url}`);
    }
  }
}
</script>

四、Vue打包项目中的图片处理

<img src="~@/static/image/lyf.jpg">

注意,最前面不要加/,否则可能会导致路径解析错误。

五、整合Element UI进行快速开发

在使用Vue框架和Element UI库进行前端开发时,可以通过以下步骤快速整合Element UI:

  1. 安装Element UI
npm install element-ui
  1. main.js中全局引入Element UI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
  1. 改造App.vue文件,使用Element UI的布局容器
<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

通过整合Element UI,可以快速开发高质量的界面布局和组件。

六、前端src中图片资源的几种写法

  1. 静态资源目录(Public)
<img src="/images/image.jpg" alt="description">
  1. 作为模块导入
<script>
import imageUrl from '@/assets/image.jpg';
</script>
<template>
  <img :src="imageUrl" alt="description">
</template>
  1. 动态路径
<template>
  <img :src="dynamicImageUrl" alt="description">
</template>
<script>
export default {
  computed: {
    dynamicImageUrl() {
      return `@/assets/images/${this.imageName}`;
    }
  }
}
</script>

总结