asp.net 如何正确从控制器获取图像

hgqdbh6s  于 2023-08-08  发布在  .NET
关注(0)|答案(1)|浏览(125)

我正在使用React和ASP NET创建图像的组件PostList。在一些网站上,我看到他们有src,他们的形象如下:

<img src="/snapshots/139/ec5b8456-4c7a-4b29-b37b-1dcb2e23f477.jpeg">

字符串
我在wwwroot文件夹命名为“图片”,如何做这样的
当我粘贴在src“/Images/1.png”它不工作,但如果我粘贴完整的路径像“https://localhost:44382/Images/1.png”它的工作
我有控制器和模型:

[ProducesResponseType(StatusCodes.Status200OK, Type = typeof(List<GetPostDto>))]
[HttpGet("Get")]
public IActionResult GetPosts()
{
  return Ok(_postService.GetPosts());
}
public class GetPostDto
{
 public long Id { get; set; }
 public string ImagePath => $"/Images/{Id}.png";
 public long LikeCount { get; set; }
 public long ViewCount { get; set; }
}

的数据
和前视图

import { Link } from 'react-router-dom'

interface IPost {
    id: number,
    likeCount: number,
    viewCount: number,
    imagePath: string
}

interface IPostPreview {
    post: IPost
}

export default function PostPreview({ post }: IPostPreview) {
    return (
        <Link to={`post/${post.id}`} className='h-[200px] w-[200px] flex border'>
            <img alt='qwe' src={`https://localhost:44382${post.imagePath}`} className='flex justify-between px-3 w-full h-full'>
            </img>
        </Link>
    )
}

1zmg4dgp

1zmg4dgp1#

正确的方法是当你设计API的时候。以不需要在客户端更改的形式返回数据。当你使用相对路径时,你可能会在不同的技术中看到不同的行为(React,flutter,...)。另外,在那种情况下,你需要在你添加的每一个app客户端(React,flutter,...)中做这些事情,这是不正确的
我不知道PostService类是如何设计的。但我将提供一个在controller中使用的解决方案,您可以在将来更优化地将其添加到PostService中:

public class GetPostDto
{
   //... other properties

   public string ImagePath { get; set; }
  
}

字符串
并按如下方式更改控制器代码:

[ProducesResponseType(StatusCodes.Status200OK, Type = typeof(List<GetPostDto>))]
[HttpGet("Get")]
public IActionResult GetPosts()
{
    var posts = _postService.GetPosts();
    posts.ToList().ForEach(x=>x.ImagePath= $"{Request.Scheme}://{Request.Host}/Images/{x.Id}.png");
    return Ok(posts);
}

相关问题