Vue中经props接收本地JSON后，动态绑定img的src无法渲染图片

无DOM写入异常、文本渲染正常，唯独动态绑定的图片加载失败，核心原因是本地JSON中存放的图片相对路径，根本不会走构建工具的静态资源解析流程——路径只是作为纯字符串从JSON透传，绑定到img标签后，浏览器拿到的实际请求地址和构建后真实的图片资源地址对不上。
控制台无报错是因为图片资源的静默404，很多时候不会抛出显式异常，只会显示破图占位，切到开发者工具的网络面板，筛选img类型请求，就能看到对应失败的404记录。

• 如果图片是项目src目录下的本地资源，不要直接把JSON里的相对路径绑定给src：
  • 提前在组件中通过import引入所有用到的本地图片，或用构建工具支持的URL生成规则拿到资源的可访问地址
  • 遍历列表渲染时，根据JSON中存的图片标识字段，匹配到对应的已导入资源值再绑定给img的src，不要直接透传JSON里的路径字符串
• 如果图片是放在项目public文件夹下的公共静态资源，JSON里的路径必须写以/开头的根路径格式，比如/images/banner.png，不能写相对路径，否则路径会随当前页面的路由层级偏移，导致请求地址错位
• 如果图片是公网可访问的资源，直接在JSON里存完整的图片绝对URL即可，这类场景下字符串透传不会有解析问题，可以正常加载

内容的提问来源于stack exchange，提问作者Marko_TON