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

<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>

 效果如下

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

Logo

前往低代码交流专区

更多推荐