时间戳

首页 > 解决方案 > 为什么我不能从路径中获取图片

reactjs - 为什么我不能从路径中获取图片

问题描述

我正在尝试从数组映射图像路径。我得到了路径，但无法加载它。有什么办法可以解决这个问题吗？如果是，请帮助我。

  import React,{useState,useEffect} from 'react';
    import axios from './axios';
    const base_url= "https://image.tmdb.org/t/p/original/";
    
    
    function Row({ title, fetchUrl }) {
        const [movies, setMovies] = useState([]);
    
        useEffect(()=>{
            async function fetchData(){
                
                const request = await axios.get(fetchUrl);
                setMovies(request.data.results);
                return request;
            }
            fetchData();
        }, [fetchUrl]);
        
        console.log(movies)
        
    
        return (
            <div className="row">
            
                <h2>{title}</h2>
                <div className="row__posters">
                    {movies.map(movie=> (                   
                        <img src={'${base_url}${movie.poster_path}'} alt={movie.name}  key={movie.id}></img>                    
                    ))}
                </div>
            </div>
        )
    
    }
    
    export default Row

标签： reactjs

解决方案

问题似乎与您尝试计算源网址的方式有关。使用字符串模板时使用反引号 (`)。

<div className="row__posters">
  {movies.map(movie=> (                   
    <img
      key={movie.id}
      src={`${base_url}${movie.poster_path}`} // <-- use backticks for templating
      alt={movie.name}
    />                    
  ))}
</div>

推荐阅读