vue使用axios 请求资源获取成功，页面图片资源却无法渲染

缺乏、安全感 2021-12-17 17:07 1098阅读 0赞

# [SegmentFault][] #

*  [vue使用axios 请求资源获取成功，页面图片资源却无法渲染][vue_axios]

*  [axios][]
 *  
 *  [vue.js][]
 *  
 *  [javascript][]

1.7k 次浏览

问题对人有帮助，内容完整，我也想知道答案0问题没有实际价值，缺少关键内容，没有改进余地

资源获取成功，图片却无法渲染。  
在浏览器地址栏中放入图片资源路径，可以渲染出来。之后再刷新页面，项目中的图片就正常渲染出来了。  
如果没有上述操作，图片资源却渲染失败。

**axios 请求**

getData (bool) {
            axios.get(`http://sbdx.lygher.com/wenpaiting/wpt/api/pc.php?op=guangguang&p=${this.index}`)
              .then((response) => {
                console.log(response.data)
                for (let i = 0; i < response.data.length; i++) {
                  if (bool) {
                    this.pageData.unshift(response.data[i])
                  } else {
                    this.pageData.push(response.data[i])
                  }
                }
              })
              .catch((error) => {
                console.log(error)
              })
          }

**请求之后的结果**![图片描述][bV1o1I_w_684_h_381]

**报错提示**  
![图片描述][bV1o2c_w_689_h_455]

**使用报错的图片地址打开一个新的浏览器窗口，图片正常显示**

![图片描述][bV1o3Q_w_582_h_724]

**之后刷新项目，在新的浏览器窗口打开的图片地址正常显示，其他图片资源依然报错**

社区的大佬们指点下，跪谢^\_^

[SegmentFault]: https://segmentfault.com/
[vue_axios]: https://segmentfault.com/q/1010000012688760
[axios]: https://segmentfault.com/t/axios
[vue.js]: https://segmentfault.com/t/vue.js
[javascript]: https://segmentfault.com/t/javascript
[bV1o1I_w_684_h_381]: /images/20211214/fe2e7511df3742c0b968897b2a053b17.png
[bV1o2c_w_689_h_455]: /images/20211214/a30db6c41b8a4e4eadf331ec56b1accc.png
[bV1o3Q_w_582_h_724]: /images/20211214/c78d002dc2cc4cea88f0385e8f620d98.png