1. vue2 引入图片的方式
- 直接引入图片路径（src/assets/）
<template>
<img src='../assets/logo.png' alt='logo' />
</template>
- 使用静态文件夹 public下的图片 打包工具不会进行优化处理
<template>
<img src='/static/logo.png' alt='logo' />
</template>
- 图片作为为变量定义 （使用import 导入）
<template>
<img :src='logo' alt='logo' />
</template>
<script>
import logo from '../assets/logo.png';
export default {
data() {
return {
logo: logo,
};
},
};
</script>
- 图片作为为变量定义 （使用import 动态导入）
<template>
<img :src='logo' alt='logo' />
</template>
<script>
export default {
data() {
return {
logo: logo,
};
},
};
created(){
import('../../assets/img/psw1.png').then((img) => {
this.logo = img.default
})
}
结果
{
"default": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAAXNSR0IArs4c6QAAAGBQTFRFAAAAgICAqqqqyMjIz8/PyMjIzs7Oz8/Pz8/Pz8/Pzs7Ozs7Ozs7Oz8/Pz8/Pz8/Pz8/Pzs7Ozs7Ozc3Nzs7Ozs7Ozs7Oz8/Pzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OCRsmNQAAAB90Uk5TAAIDDhAcSU9Qen6ChoaKkJaYrK63wMzb3Ojv8/j9/v4KkHgAAABdSURBVBgZzcGHEYAgAACxF3tvWBCU/be04Z0baMLX5pSXdOJUbKXAEeVWcMnWMfI4eNG4ZjiJtaqv615Zm/DITVwNWg9VbHIcf2kAKYFm8bkFXQhICYRdwFvb8g87bC0EGFVeM8oAAAAASUVORK5CYII="
}
5. 图片作为为变量定义（使用require进行导入）
<template>
<img :src="logo" alt="logo" />
</template>
<script>
export default {
data() {
return {
logo: require('../assets/logo.png')
};
},
};
</script>
直接在模板中使用
<template>
<img :src="require('../assets/logo.png')" alt="logo" />
</template>
- 图片作为变量定义 （使用require.context动态加载）
这种方法适用于从特定文件夹动态加载图片。首先使用 require.context 获取图片文件夹中的所有图片路径，然后遍历这些路径并为每个图片创建一个对象。最后，通过计算属性在模板中引用它们。
<template>
<img
v-for="(item,_,index) in images"
:key="index"
:src="item"
alt=""
@click="handleScan"
>
</template>
<script>
export default {
computed: {
images() {
const imageContext = require.context('../assets/images', false, /\.png$/);
const imagePaths = imageContext.keys();
const images = {};
imagePaths.forEach((path) => {
const imageName = path.replace(/^\.\/(.*)\.\w+$/, '$1');
images[imageName] = imageContext(path);
});
return images;
},
},
};
</script>
获取的结果：
{
"bg1": "/static/img/bg1.ed31e128.png",
"bg2": "/static/img/bg2.9b7e0cbc.png",
"bg3": "/static/img/bg3.0edebc37.png",
"erweima": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAAXNSR0IArs4c6QAAAcVQTFRFAAAAKqr/Mb7/McP/NMP/F5D/L7j/L7r/L7z/Mbz/Mb7/M8D/M8L/GZH/GZP/GZX/G5f/G5n/HZn/HZr/H5z/H57/H6D/Jqn/Jqv/KbD/K7L/LbX/Lbf/l9T/3/L/////ML7/MsD/M8H/M8P/MsH/Mb3/NMP/L7v/M8H/Mb7/MsL/GJH/GZL/GZP/GpT/G5X/G5b/HJf/HJj/HZn/HZr/Hpr/Hpv/Hpz/H5z/H53/IJ7/IJ//IZ//IaD/IqH/IqL/IqP/I6P/I6T/JKX/JKb/Jaf/Jaj/Jqj/Jqn/Jqr/J6r/J6v/KKz/KK3/KK7/Ka7/Ka//KrD/KrH/K7H/K7L/K7P/LLP/LLT/LLX/LbX/Lbb/Lbf/Lrf/Lrj/L7j/L7n/L7r/MLr/MLv/MLz/Mbz/Mb3/Mb7/Mr7/Mr//MsD/M8D/M8H/NML/Naj/N6z/PL//Pb//PcD/QbL/Q7T/R7P/TbX/T7b/Z8v/hsz/h8z/ntX/n9f/o+D/o+H/sd//s97/veT/vuT/wOX/yej/yen/y+3/2/P/5/X/5/f/6PX/6Pf/6vj/6/f/6/j/7Pj/7fj/7vj/7/j/8Pn/8vn//f7//v7/////CUIq5AAAACt0Uk5TAAYvL4SHjY2NjY2NjY6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6VlZWVvNfX+Pj9/V6h7z8AAAI4SURBVEjHldAHcxJBFMDxZ++9996Dldg1YCEiQUAunMEDwgUMYIk9lkSJmhgjl1hu3+f17XIn7WD2/sPu7OPuNwMLC5/IdvTwgQUgWvlYvuP75wmzolgqlYqFQqnID7R3mg9apuCifdXftnz4kWhYxA/t52PzLZO3yuVytPL5DvPeKoFluq4P0efF+LSJjpnT48/1IeqQRWBpNpvV9ZEp7NDUCH/piE1gSSaTGRxDZMZPxwyGODbIgwYzg2w0lUpl/pdOp+15lOGMmGsEFmuaiXMpjZeqLnq9Ns+hKeY6Ajs1xFktmUw+TIo0fq7Ns4hiriewgwh9O8la/jmbHBiokmQjgT1oqKrKHG6LqaqB+ICeqtBkjEQi4XjDiQQRVaXHTQR29yuKI1EUg29Kv9JMYLsSdyTxOJE4mVYC22KOJBarIN6PUeBgHEk0WuEb5UDo3hyKRCp8i0QjIGvCYSLhexTImr6+Ct8okDQsFCIS4oGcYd+CQSJ3ee0IbL1jFbQPFWRibktgSyAQ6A2IeqnAKxN/ibk9gV0T5XJ5girzvvxB/HSb14G03MHvl7d4IG3Y19c3RSBhPr6l3jy7YQUS5r3f7/f5fLT8/AQS5l1PQyBh/v4Qff9wXQQyxu7pNR7IG/Pz1Ss8CQKbLzckQ2DTpfqkCGy8WOsCSJrztSQJbPB6vd3dfPOCtDlnJ01g/VkreQLrzlRzQWDtaRG4Mqd4rgisOUm5I7Da4/GAW9PV5ZbAqhOuCSz6B2jkDrUxJwoFAAAAAElFTkSuQmCC",
"eye1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAPCAYAAADgbT9oAAAAAXNSR0IArs4c6QAAAtlJREFUOBF9lF9IU3EUx++97g+6oigKSQ03ndtzQUXaSy4J6UEJzB7yQZB8KOkPJdR7UKSJ9dDwoReVCpIetCjswQcD6aWgwjncoNXSLbcI3Lpzc33ObVdmDX9wPOf3Pd/z/Z3fub+pKlusxcXFHdlsthGKK5/P71dVNUEctlqt710uV2CLUkUtlQyFQp5MJnOdXCdWgaWwCMK7OGAPsUI8Szzs9Xqfyv7ftUkYorqwsHAJ0i3iJYr9ZWVlY/X19RGzMBaLbUsmkyfI94K1wJm02Ww9TqdzyeSI3xCGqCHqB+vG7mmadtPtduuMw804+sEOwImDvwB/gGAuEAi0go0Q6/hmug/DM9aGMKRBkD5IXQ0NDeOSDQaDLevr688p+gr+Gr8XuA176/F4fGBZONW5XG4azO5wOA7W1NTId1A0+YNoO0WXIV4wRaPRaAUFj8ClqJfcIB110PEx4iPc7prU0r0c2oyVp1KpUfhGs1o4HN7JZgTOOKIPhSxrdXX1EG4fL+AqRRN0fltwOHO4UUw6Nxbdf+PAM2xOcoMeAbW1tbUm/G6KhwQoWlUSUxDhA7ba7Xajw0L+C97IF/bS+QzxHE0aB1roaFrX9SjgDazdJHLQB4k52EeXkyZe8D68kTdxxikNHka4SzCNZ/Kbri7KScytzyTyxD4iPsUI/PPz88fJq/F4fDsCw3CaqLljchlnJfkn7GcZy5jgxsejowlEBkgOFYszgm7wT/DeIPgrkUj8hCPP8Xzh6vLhq/gxvQRTOews/DzxpncsP467FF4h+dhisfTX1dXJLBU6bqTIeMfMeqa2tvY7PJUP1cmNBuDLrU9x2Gfhy9p4x3+3ioL4acj3IcvP9xUFU1iQeBmsnJxcW+bZhvfin4H3MoIfpob4/4QFlFmurKx0EJ7DjmJWrHhFEZPr+xF8V5ww45LCZlI8XWmRSKQynU5Xs9V5RUv8Z1su5pSK/wBQzV7bWQIN0wAAAABJRU5ErkJggg==",
"eye2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAARCAYAAAA2cze9AAAAAXNSR0IArs4c6QAAA1NJREFUOBHFVE1oFVcUPufOnclLUBTFEoy4KBS7VlDRuGgTzfM1akRI7aIuBDELDdaiMXmvMKBJjPiHdWFw0Y2KFhStee/5V4pQBbGLCrZQuhAaq5FICC7ie86de/zuyGD87ap4FnPuPT/fOee7hyH6H4X/C1uudk2LRS21Vj4WtnMV8RgT3/Os/p1X7vnrffnvBJdyYV7E0U4WXm/F1inmCWEaxn0G7rOYUUL4Bit1RGf7fnxbkTfARYSjS93bkNsnRCPMMqhJn+SW3uEUQH4Jp8SVaLlQ3IGJVhDzUFCb2cSfhSNpjNOvgIuEKrpUGYRxIwkd0jQ7z7nOqlwpfBLFURfC58M3Kiwlv2XBUeb22JS7c2joOHqq+tpr4pY999ICr4BH5V0HSaTTKtpQkx045YKi0q4VRHJeFN1Xoq4IyUcAawMtN3Um04xujZTCOc/k6TXYanyVWcDZcMzlKvdxYsr5tRjxG1G8JQWW38I6zPYDOkai3+H5ctBfubedPLUMky02E5UdLpdz4f0go5vYcq2JKycctc6egIPD6UL2OLM6FWT3HnMOJ2bULBRLs7XW35Ix50xFDTh70NJ/C/knSLjN3Z1wU++/QPsSRbNRsXuTsyXg8US1Uaydiec/7IypsJgGwauSr4e1eDntBUmnzs9C/0A1uHMqfq7/OsBvsaikqHYOr67mmjytPEAnPbiuTYM9q+5YRKN4s27tH0rtiRZuxibdmWyTcr7RxHYRONng7EnneJQK+NoqVtqeFbs70wRu7buLbS6CmsGoVPjccSm/Dkw1P/UcQQympX1prBTDehPZM2jwhvdF70lnT8DdAZ2dY1IHUPXw5ALaD7CW/IdE8c/mYuFJPPZkHExtROxmfzVogMjFfIORqIx9Z1D3FZQj8/U9FzZDPfvh2Y7A035N0MXLQ8ctyYXvlkYs85XiUU/H1znb99BNEpcK68nSAStS8XXQis3508U7SVbmxfHl1xTz65D4PZwzUOiygBom+Vur4BHZuDamuB64jYhpQ8ynaOSsJr+DV4WPX6K8A9wFOG7j8fF2gHyN6xK8q5/M6tYn+a/QA4xftqQGg9W7b08GTc9v7Tx1ptr9Fugq1VM1moNnqpLNjPCa/KPU/0H0c86dfTW+1UJNAAAAAElFTkSuQmCC",
"logo": "/static/img/logo.79c1fc1b.png",
"logo2": "/static/img/logo2.1843957b.png",
"mobile1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAWCAYAAADJqhx8AAAAAXNSR0IArs4c6QAAASpJREFUOBHtVMmugzAMdNhXwYUD//9zCA5sB4TYHmNwFPW1FR9QS2kSe8a1QybqOI1OW9eV7iW2X00pRY7jMIZ/27alYRg4yVfmHQQ5z3PKsowc/DPIaZrykATbtpFlWbwFxnVdCVHf9zySJCGuAAAkENA0TdQ0jSagtaIoKIoi9sVxTOM4cssOgujJNN/3uTypAPEgCEyIXl8nobfXAkT098SuJp8gP2B+CYh+Z0CXFnBHTPF8uDNv3XyVoYe6rv9p4i3jdJr60VqAGuWREOKyLAz2PE9cPMMPScM4AdQGbYucEYDEu67jqvjhuF8gxCB3nUCkjKxmBbZtUxiGhBkDZYsBKzx1Ht5RVRXB+VqqEF7neZ4ZW5YlqTPzse87l4Qv8cTQKs4M78YfAOeBj+SABkkAAAAASUVORK5CYII=",
"mobile2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAWCAYAAADJqhx8AAAAAXNSR0IArs4c6QAAAhJJREFUOBGdVDtrVFEQnpn7SFjQkCb5BSoiVmmsBZvNYqeNrbWlko3FijckiLWdCmJpoWuWEBDxD4ggWFiYBLResImw994zfnPu2Vf2hjxmYe+cb2a+mTNnzmGC6I9OWuyVK6SUEisbdqwoiQr/TVtPv5oPq3ak2B68A3zTqS6wGKxmMmVKVBGNEHLSF9Wt6Pbmcx50129wpD0Yd1iiN4gVdiSu0MsS8wFFoCvoGrBvmpBjdZFz+gJM/SSdW42ZZE41X2SJXyXN7LOlzLvtjGK9D6dDXwzRRZLoUbKavfT27bW3THyPBjQfG+DLRlbTTeJYXhd5eUWZf9rakXLaaLw33UTwK6nMURx5Ao9O/HEz+4XlnQloVg1tqrLa4owyDKkIZht+Ih164H2qQxvSnRgWHBy+IcYTnKOA0ZicuwdTFZy28jq/qoKasa1zrsMCQZ3pdFggOOsxjMnDJOJUlZf0w8by2HS85uifTbGXEYFz5RMnhw+tu8xMdnWnBBjAAOkCnApbVATAhXkfwX+8BxxnZmMU7GfoqjpetqseKgAo/CxpZZ9CCv/Jd9a+4Pn4Hjc3H0ziZXd9o2S9a1hMkVPG3UQTFiedvF5wD6UeHMURvCRq+bFd/fj4UqluFxXmeBf2FY+Ar3+43aPRRPPY6nWY+0njworfat5r36KCO+GGjEPNOl5VVGgW4N8Rl21ube39B4kuuN17HJSMAAAAAElFTkSuQmCC",
"psw1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAAXNSR0IArs4c6QAAAGBQTFRFAAAAgICAqqqqyMjIz8/PyMjIzs7Oz8/Pz8/Pz8/Pzs7Ozs7Ozs7Oz8/Pz8/Pz8/Pz8/Pzs7Ozs7Ozc3Nzs7Ozs7Ozs7Oz8/Pzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OCRsmNQAAAB90Uk5TAAIDDhAcSU9Qen6ChoaKkJaYrK63wMzb3Ojv8/j9/v4KkHgAAABdSURBVBgZzcGHEYAgAACxF3tvWBCU/be04Z0baMLX5pSXdOJUbKXAEeVWcMnWMfI4eNG4ZjiJtaqv615Zm/DITVwNWg9VbHIcf2kAKYFm8bkFXQhICYRdwFvb8g87bC0EGFVeM8oAAAAASUVORK5CYII=",
"psw2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAAXNSR0IArs4c6QAAAH5QTFRFAAAAgICAqqqqjo6OnZ2dkpKSmZmZj4+PlpaWnJycm5ublZWVlpaWl5eXmJiYmpqam5ubmZmZmpqamZmZmJiYmZmZmJiYmpqamJiYmZmZmJiYmZmZmZmZmpqamZmZmZmZmZmZmZmZmZmZmZmZmZmZmJiYmZmZmJiYmJiYmZmZVSGSOwAAACp0Uk5TAAIGCQ0ODxAREhcYLkJDYHV2gYKLj5CQuLm6vL6/wMvMzt7f7e7y8/b58nRHqgAAAH1JREFUGNO9zkkOgzAQRNGymcI8xBgzh4AJ3P+CEYYEBHtq+aRWf+Deuc9umrrEORCJP2XoeWE5RuRnRv72KZeS06AX+mrWq34gmxmbOeymNRUWlQZIBjAJaJVQKBYc/pgrNNvGRno6hy76gKbD+sjYk8YtKSaHUie5xN+xL/g7CbToO5S4AAAAAElFTkSuQmCC",
"saomadenglu": "data:image/png;base64,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",
"text1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAXCAYAAAD+4+QTAAAAAXNSR0IArs4c6QAAAYNJREFUSA3tlFtLAzEQhVMvVcRbsYhWRdT//3sEn1u8VrzjpVjPl81Alk2WWvIkHjg7M8lkZjM7sx3nXEfcE/tiVyyFTwW6E68W9dgXByJ6SRBvQ5wu6cENwFAce63Mg7gHYp8kVqJ76ROxFHhhknQXSkVsi/OfpK06jb1cuVbleSrS3jG2ZZyJyBjMGf6cayCX5FCePZH5odcBQ3sikoCA2IB9ugj/I7GBXJL34DmVZHIB+ofXKokN2P/2mnN2LpiVYE5SGGnxWSSoBcbvQlwXXzAC2D8XV8SnsFYTuSS85WPNszIY1ofEOjdI3gLfXLkSceZf+ltJvkIhrFXnr0v9pMWb0Ov09m7Yt1bEfBXpJgO+zMhAtD+37aWkfYobuot2ZWEnSAkPc8LYEgm+hjEj6NCxOLKp5Rz6srgpHovcZCgyzcwG4KbXIodtGKUmwWfwPnES86Qk/J9wiPdvZV+K9g2lzobcMHLaEjB8lDQ7bDi3IZXkTQd4W34XBI9/ITJ/jx9XjUE41oNINgAAAABJRU5ErkJggg==",
"text2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAXCAYAAAD+4+QTAAAAAXNSR0IArs4c6QAAAwhJREFUSA21VU9IlEEUf2+++SzSmyid7NRZrI4lRsXqZiAIRaeCqO4Rupt72NJaQ+weQkRERBcD//Xn0KkgqK5lFEkFiv25JIHO983rvfka3V1FPpeaXb55M/N+7/+bQaIHQfT0db+N6RwC7AIZyBTR2gwIxD/knwziMxSesrG6xzDHhjjHqDGd2XsdzeO+AWthyEGccBbCPxkiNAEnK/mWC3PyvD1rLM4+v2QZBW0JxQOx7KKuh1tymJiSUJV09ZnnWT9Hv/AMGzvChpzFlZl+Z3ZYr5qxvfRtPXttOzSdbzJgFyXqWiLjwrNUm7BNUSxboqTEjeokbgrcwqHIliJSLuFutQV0SlZXjZbYE1Hwn5QktiBo50l1zT8p7DYmvowBvQ07hwe94dFUvpuQTrOFd3W29NDvm+kcVw+2hQEUMVN65/clI5Jvl5NqT6IoGmX3TlIMV8xMrkNA0rQW6D573kuW7tGzopZ98yh/gCwMg6UTkQHGlQ1pWl5yTpwvZSdC4qz7Aixr0l8cjcdjQPVRaEKYw4PFSGiNwVdE9VtoFvXBzRUfTrxbV+VEd7XlWHWXVroVs0NOsPCF1nYoCHrCYPt+LwczQ590YFsVqG6dbbvg95M5cQBXpnKuTUKFzZj9x81oYVHumKS6NgxZpU01rVzp+j6pSUIaUBIurhAmqnKSBp6K569cpRDnRU9MdDgVMCVTbPGQXFf8X0AzkR9lha4qFOASV4H362V4rHTEy+R3BOPJS718SxQZ2LKR9/4OlPZgOQ0SJUS6oXVjU8H8/N7AvXnKWjngwZ4xYIdXYKYKnWZy4CpD9iSxlU6W4e2R2It5vJYt5wEu83Q7qN82IKdu0KubIfz4vDOOKMNP8RgreQFB0AdRfI1x7YJmJfwg4IgOwzsQgfXYdXOdIWhsWcB9542crSrxjNFEvodfy3GlwPCzHDrhqCK2fSyoq+O7qbjoedPO7v6pZFYxsJFkMXSNpNR4oMIcHi2+r+RLv1qnJAB4Q6jmOTqzGAYFnR18nl7cxpx/ALF7KDJL26faAAAAAElFTkSuQmCC",
"user1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAAAXNSR0IArs4c6QAAAW9JREFUOBGlk9lOwzAQRcNalhaJfUcgHnhD4v8/BfFSBAgEYt/Kek7URMQ2pC1XOko8Ho/H43GW1WsYlwkYqnP9y2GaxZsw1Q30xfcejuEFIv0WbB7PbbiFS3gFs1uGSTiCO6jVOB4HsJ7wdPMd2IeRcN56hFrE8Aan4QRjj9oG181BRalg1sjauDClD4yPoF9FqWCjeHxWvOKB8z0d8xnHZry+tFg3bzq60VRm3p5HsHYprWE0+6twMkoVh07X2UXOO7ZOtsQGLMEJ2DYVmXJKBtkDA4Syv+yzqK5hMMc2pvjv7tbwHTyatZoBMz0DS1Leug6FXLwLLdDxAqLdsZn1CmyBtW1DHtAJVQRy8hCuodyR/5/Sbh/aa76SMcjrVwRbwGBhDfQEvcj3ant4KQ/QsTXMahXOwd360Q3OnsIM8zc2y9fHbbBBZH29mKaZWXDT9MYGkbdtL7YM1oDoaWDrR65vWC/foVn9J6BdkH0DE/9G91Um8f0AAAAASUVORK5CYII=",
"user2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAAAXNSR0IArs4c6QAAAo1JREFUOBGNU01oU0EQntm3L4l/RRHxZFFPgnqwPwgiSGuVJrHoQfFQ1JMoVaSCP0mrMVCNBlS0oiDqQfEgInowTQ0iUlBQFKzVHvzBBE9twdZ6itn33jgbefDMj81cZnbmm29nZ2YRZhD60u+H7EQ9mDKLLXHrf3CsFixkIo1I1E9EzYwxEUUegIYk4EFsP/e1Up6o5LQykU4keMWxKYG4gxBX8Xk3ANZZDrxXmUhrpbyyyujp8XpLwUcH4ao/mIx6k4jiQj3J3yaADT5Jq3FTctobL6usoMQ+Bo/5ArNOeoHaRow7JgUOCIK5ysKdpfEyMoHQyGnPqzUbQ/FfDsFrIGyakQwcZwEicrOrC/cxj0DzSxFllRGKUSJYXwp0z/T2ugkEawFh1PW5uoyMJ3KLHKfBSkf3uiCvtsZzMT4vlELe8fq1XTZN7VSD0QtgQzcIuCgJbsBs/zcoFFYoRUc4vIcn0e0LJy5rrFcqktGL5Dw1/XMIiNbo+5C3l5/OWG3joFzq24Yr4wUvkbb/IdP9sCZyh8GmoyCQNwAGkMQIN3uS7UWMb+IL2pl3SgD1GVsSN5mcQ39FukaRaCz3gPnbAMUpiYuvYOjQbzfuakrH6ywqRIjwmp3qbeCSu1zCYmVE9w1r4N1DfkMzs4cwnBh2k6tpNdizERQ9YqK7siPRpXHFadrp4V1c0WYSxtZaiHSiGUw848/fSUD7VSrWUiTTz3MciPFGX/IF+95oZ60iO848JhL3gOzTOkfa49+3c6lLZGDO+VpJvDjTEGeVbY+oVO86wVW18oReYlvPDy+oVhvDfR+4RVn+Fa2SV2gZb8+nWpMr4XiHPjsAy3nB8YQ0zMlKoFp9BpjHDLTxD4TD9cjwGHRLAAAAAElFTkSuQmCC"
}
2. vue3导入图片定义变量
vue3中的vite没有require方法定义的使用，不能使用require方法进行资源的导入，而是使用新的方法。vite 静态资源处理
2.1 使用import导入资源
<template>
<div>
<img :src="img" />
</div>
</template>
<script setup>
import img from '@/assets/echarts/earth.jpg'
const img = ref(img)
</script>
2.2 使用 new URL(url, import.meta.url) 语法
<template>
<div>
<img :src="img" />
</div>
</template>
<script setup>
const img = new URL('@/assets/echarts/earth.jpg', import.meta.url).href
</script>
注意：new URL不能进行封装，引入的地址会出现不对。
