vue 加载动态图片出错的三种解决方法

由于解析问题，通常直接引用链接，图片会加载失败，通过学习，整理出以下三种解决错误的方法

<template>
    <div class="first">
      <!-- 普通加载 （不显示）出错-->
      <img :src="imgarr[1]">
      <!--第一种 在数据链接中用require("./1.jpeg")包裹链接  -->
      <img :src="imgarr[0]">
      <!--第二种 将图片先引入文件中，用变量承载，数据中将这个变量赋值 -->
      <img :src="imgurl">
      <!--第三种 将图片放入vue项目的public文件夹中，再根目录调用-->
      <img :src="imgarr[2]">
    </div>
</template>
<script>
import img from "./2.jpeg"
export default {
  // 定义数据
    data(){
        return {
            imgarr:[require("./1.jpeg"),"./2.jpeg","/3.jpeg"],
            imgurl:img,
          }
    },
}
</script>

 效果如下

 希望对零基础小白有所帮助