一、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:
- 安装Element UI
npm install element-ui
- 在
main.js
中全局引入Element UI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
- 改造
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中图片资源的几种写法
- 静态资源目录(Public)
<img src="/images/image.jpg" alt="description">
- 作为模块导入
<script>
import imageUrl from '@/assets/image.jpg';
</script>
<template>
<img :src="imageUrl" alt="description">
</template>
- 动态路径
<template>
<img :src="dynamicImageUrl" alt="description">
</template>
<script>
export default {
computed: {
dynamicImageUrl() {
return `@/assets/images/${this.imageName}`;
}
}
}
</script>