Android 本地加载vue vue加载本地目录图片

一、直接在的src下写图片的路径

这也是以前写静态页面时候用的静态路径，直接把图片的相对路径写死在上面。

二、通过 import 导入图片资源

// 绑定数据
import mySrc from "./xxxx.jpg"; // 导入图片的相对路径
export default {
data: () => ({
myPicture: mySrc,
})
}
三、通过 require 导入图片资源
  // 绑定数据
export default {
data: () => ({
myPicture: require("./xxxx.jpg"), // 导入图片的相对路径
})
}

该方法和上面的 import 原理一样，不过一个ES6的模块化，一个是CommonJs的模块化，脚手架搭建起来的话，都会将他们打包。也就不区分什么样的方式模块化了。

需要注意的是： require()，括号里面不能写变量，也就是只能填字符串格式的图片路径

四、想通过变量，动态加载图片

// 绑定数据
export default {
data: () => ({
mySrc: "./a.jpg"
}),
}

这样直接把图片的相对路径放到数据变量中是 不行的，因为构建工具会把它进行打包，到时候的路径就不是这个路径了。

1. 把图片放在 static 文件夹下面 或者 public 下

如果是利用 vue-cli2 构建的项目，则把图片放在 static 文件夹下，

如果是利用 vue-cli3 构建的项目，则把图片放在 public 文件夹下。

因为这两文件夹不会被构建工具打包，vue 运行后会照搬过去。这样，就能直接用字符串保存它的路径了

// 绑定数据
点击
export default {
data: () => ({
mySrc: "../public/a.jpg"
}),
methods:{
myFunc() {
this.mySrc = "../public/b.jpg"
}
}
}
五、加载用户上传的图片
用户上传的图片可以直接把路径存到数据库中，然后返回该路径，Vue请求到后直接利用变量赋值即可。
因为一般存放用户上传的图片是不放在Vue项目里面的，所以不用担心Vue打包的时候把图片也打包了。
  // 绑定数据
import axios from 'axios'; // 利用ajax请求
export default {
data: () => ({
mySrc: "../public/a.jpg"
}),
async created () {
this.mySrc = await axios.get("xxxxx"); // 后端接口，返回该图片路径(注意域名)
}
}
}

直接使用图床(图片的外链)的形式，可食用阿里云OSS等，这个就直接赋值就行了。

数据库直接存放图片(base64)，这里暂时先不展开说这个了。