Vue中使用v-bind绑定媒体

将图片作为变量引入

可以通用在一个js文件中引入Vue构造函数，在原型上绑定属性来在全局使用。

import Vue from "vue";
import img from "./img/img.png";
Vue.prototype.$img = {
    img,
};

再在main.js中引入即可

import "./utils/imgs.js"

在Vue3.x中使用app.config.globalProperties.xxx来设置

// utils/imgs
import logo from "@/assets/logo.png";
export { logo };

// main.js
import * as imgs from "./utils/imgs";
app.config.globalProperties.$img = imgs;

将图片放入public静态文件夹，使用相对于index的路径

<img :src="'./logo.png'" alt="" />