vue 加载动态图片出错的三种解决方法
由于解析问题,通常直接引用链接,图片会加载失败,通过学习,整理出以下三种解决错误的方法<template><div class="first"><!-- 普通加载 (不显示)出错--><img :src="imgarr[1]"><!--第一种 在数据链接中用require("./1.jpeg")包裹链接--><img :src="i
·
由于解析问题,通常直接引用链接,图片会加载失败,通过学习,整理出以下三种解决错误的方法
<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>
效果如下
希望对零基础小白有所帮助
更多推荐
已为社区贡献2条内容
所有评论(0)