经常忽略的小疑问，今天整理了下思路
-
/ 根目录下的子目录
-
无 当前目录下的 （./）
-
../ 当前目录下的父级目录
<template>
<div class="content">
<div v-for="(item, index) in img" :key="index">
<img :src="item" alt="" />
<!-- 加了：就是动态引入图片，而动态引入图片需要require -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: "姓名",
// img : ['../../assets/logo.png','../../assets/photo.jpg']
//这样的图片是显示不出来的 => src="../../assets/logo.png" 解决办法：图片作为模块加载进去require
img: [
// require("../../assets/logo.png"),
require("../../assets/photo.jpg"),
//显示正确 => 被解析为 src="/static/img/photo.7ed4ade.jpg" 实际是拼接了本地服务的地址：http://localhost:8081/static/img/photo.7ed4ade.jpg 或者 用base64的方式编码图片了
"https://yuntop.oss-cn-hangzhou.aliyuncs.com/mini_zjsport_filehost/2022-01-23/471a0654a2234fb9b70678e521880524-file.jpg",
// 显示正确 => 服务器中的网页在线地址是不需要包裹的
// =>src="https://yuntop.oss-cn-hangzhou.aliyuncs.com/mini_zjsport_filehost/2022-01-23/471a0654a2234fb9b70678e521880524-file.jpg"
],
// img: ["/src/assets/logo.png", "/src/assets/photo.png"],
// 这样的图片是显示不出来的
// img:[require('/src/assets/logo.png'),require('/src/assets/photo.png')]
// 这样用根路径的写法会报错
};
},
};
</script>
<style scoped>
/* scoped标记 后由<div class="xxx"></div> => <div data-v-fcba8876 class="xxx"></div> */
.content {
padding: 10px;
}
img {
width: 200px;
height: 200px;
}
</style>
