Vue图片在为动态变量路径显示不出来怎么办 ,但是通过img标签显示正常 这是为什么?
案例例如:如何动态显示图片, 直接这样定义是不可以的。 这样只是把属性src赋值不能请求资源<template><img :src="img" width="100%" height="100%" alt=""></template><script>export default {name: "test",...
·
案例
例如:
如何动态显示图片, 直接这样定义是不可以的。 这样只是把属性src赋值不能请求资源
<template>
<img :src="img" width="100%" height="100%" alt="">
</template>
<script>
export default {
name: "test",
data(){
return {
img:'01.jpg'
}
}
}
</script>
正确方式:需要require引入图片资源赋值给img,
<template>
<img :src="img" width="100%" height="100%" alt="">
</template>
<script>
export default {
name: "test",
data(){
return {
img:require('01.jpg')
}
}
}
</script>
注意
-
后端传递过来的图片就不要 require 了。
-
如果要显示,直接在 img 的 src 设置后端返回的地址即可。
-
图片是在当前项目下的话,放到 static/img 目录下,然后路径统一写成 /static/img
-
图片不是在当前项目下(如用户上传的图片),后端返回绝对路径即可
更多推荐
已为社区贡献20条内容
所有评论(0)