问题
在使用移动端布局框架, vantjs的时候, 本地图片无法加载:
解决
- 先将需要使用的图片导入
import imgA from '@/assets/a.jpg' import imgB from '@/assets/b.jpg'
- 将导入的图片, 放到data数据中:
// 这里采用对象简写形式 data () { return { imgA, imgB } },
- 结构代码:
由于src需要读取的是变量, 所以只把图片数据放在组件的data中<template> <!-- 左侧是机器人--> <div class="chat-item left"> <van-image fit="cover" round :src='imgA' /> <div class="chat-pao">机器人聊天内容</div> </div> <!-- 右侧是当前用户 --> <div class="chat-item right"> <div class="chat-pao my">我的聊天内容</div> <van-image fit="cover" round :src='imgB' /> </div> </template>