调用TMDB图片API返回乱码，atob()无效，求问题原因

这事儿其实是axios默认的响应解析方式在搞鬼，咱们拆开来说清楚：

问题根源 #

当你用axios直接请求图片URL时，axios默认会把响应当成「文本/JSON」来解析，但图片本质是二进制字节数据（比如JPEG、PNG都是二进制格式）。强行把二进制数据转成文本格式，自然就会出现你看到的乱码——就像把压缩包直接用记事本打开，全是看不懂的字符。

而你第二种方式（先调用热门电影API拿海报路径，再拼接图片URL）其实根本没通过axios请求图片，只是把拼接好的URL直接交给<img>标签使用了。浏览器本身就会自动处理图片的二进制加载逻辑，所以能正常显示图片，不会出现乱码问题。

如何解决直接请求图片的问题？ #

如果确实需要通过axios获取图片的二进制数据（比如要做本地缓存、图片编辑等操作），你得告诉axios不要自动解析文本，而是返回原始的二进制数据流：

export default {
  data() {
    return { imageUrl: null };
  },
  mounted() {
    axios.get("https://image.tmdb.org/t/p/w500/8uO0gUM8aNqYLs1OsTBQiXu0fEv.jpg?api_key=05b735a5f79822f887889281f45b295a", {
      // 关键配置：指定响应类型为二进制Blob
      responseType: 'blob'
    })
    .then(response => {
      // 将Blob对象转换为浏览器可识别的图片URL
      this.imageUrl = URL.createObjectURL(response.data);
      console.log(this.imageUrl); // 此时会得到一个blob://开头的URL，可直接用于img标签的src属性
    })
    .catch(error => console.error('加载图片失败：', error));
  }
};

这样处理后，你得到的就是浏览器能正常识别的图片资源地址，不会再出现乱码了。

补充建议 #

其实大多数场景下，直接用<img :src="拼接好的图片URL">就足够了——浏览器本身就擅长加载图片资源，还自带缓存机制，比自己用axios处理更省心高效。

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