尚硅谷谷粒商城头像不显示

在谷粒商城的P93头像上传这里，我的所有图片都能正常上传到阿里oss，但是在上传完之后没法正常显示图片，具体点开之后src显示的是undefined
这种情况不知道怎么做了，卡了2小时了脑壳疼
这里已经改成了String(teacher.avater)

        <!-- 头衔缩略图 -->
        <pan-thumb :image="String(teacher.avater)" />

用F12里的小鼠标点开图片后跳出html的提示是这样的

img

<img data-v-175fbaac="" src="undefined" class="pan-thumb">

上传完成后能顺利输出图片的url，所以应该问题就出在输出图片这里了，想不明白，来位神仙吧！

img

  1. 返回的地址本来就是字符串，不需要string()转
  2. 显示src=“undefined” 就是因为你转字符串了，而teacher对象上不存在avater属性，所以转换成了undefined；
    如果直接绑定teacher.avater且teacher对象上不存在avater属性，img标签连src属性都没有
  3. 你确定一下真的返回图片地址了?打开控制台，切到network选项卡，看看上传图片接口是否返回了地址，或者你在代码里打印一下
  4. 看看是否把地址赋值给了teacher对象的avater属性

如有帮助，望采纳 ^.^ 谢谢啦~

你在浏览器地址栏中看看回传的链接能否正常显示,能正常显示,看看上传后得带的url是否正常复制给teacher.avater这个变量,在赋值完成后,使用console.log()打印输出一下teacher.avater这个变量具体的值,在赋值变量的时候需要加上this.
如果还是不行就在复制前街上debugger语句,在给teacher.avater赋值前手动调试,看看是否是赋值出现的问题
希望能帮到你,
有帮助点个采纳.

你改成这个String(teacher.avater)什么意思？你认为vue可以识别读懂吗？实际上他不知道这是个啥东西，将他当成一个未定义的变量，所以浏览器上面这个才是undefined，你就按人家的教程来就行，至于无法回显图片也许你在上传后没有将上传返回的图片赋值给那个变量，参考人家的教程即可
https://www.cnblogs.com/birdy-silhouette/p/14397378.html

直接teacher.avater 不行吗?