获取每个产品图片 url

Posted 2023-02-15

【中文标题】获取每个产品图片 url

【英文标题】：Get every product image url

【发布时间】：2021-09-06 10:50:22

【问题描述】：

我使用 Rails 作为后端，React 作为前端。 我已经使用ActiveStorage 进行文件上传，并且成功上传到后端。问题是我无法将带有我的 json 的 image url 发送到我的前端以在页面上显示 image-preview。 所以我只想将所有的图片 url 发送到前端并显示出来。

products_controller.rb

# Main Preview
  def index
    @product = Product.paginate(:page => params[:page], per_page: 3).order(created_at: :desc)
    @allProducts = Product.all
    @allProductsImage = Product.all.image
    @image = url_for(@allProductsImage)

    @allProductsImage.map  |product|
      product.as_json.merge( image: url_for(product.image) )
    
    
    render json: 
      products: @product,
      image_url: @image,
      allProducts: @allProducts,
      page: @product.current_page,
      pages: @product.total_pages
    
  end



Product.jsx

const [imageSource, setImageSource] = useState("https://image.com/1920x1080");
useEffect(() => 
    AOS.init();
    fetchProducts(currentApi);
    axios
      .get("/api/v1/products/index",  withCredentials: true )
      .then((response) => 
        setImageSource(response.data.image_url);
      )
      .catch((error) => 
        console.log("Check Login Error", error);
      );
  , [imageSource]);

每次我调用 Product.image 我都会遇到 undefined method 'image' 并且在使用 Product.find(params[:id]) 之后我会遇到 cant find product by id error。 我看过一些使用序列化程序的文章，但我真的不想使用它。 如何获取每个产品的图片网址并将其呈现为 image_url 部分中的 json？

【参考方案1】：

class Product
  def image_url
    Rails.application
         .routes
         .url_helpers
         .rails_blob_path(image)
  end
end

def index
  if params[:page].present?
    products = Product.paginate(page: params[:page], per_page: 3)
    render json: 
      products: products.as_json(methods: :image_url),
      page: params[:page],
      per_page: 3 
    
  else
    @products = Product.all
    render json: 
      products: products.as_json(methods: :image_url),
    
  end
end

您编写控制器的方式完全没有意义。在响应中同时包含分页和未分页的记录违背了分页的全部目的。

在响应中有一个 image_url 键也没有意义。您正在渲染一组图像。那实际上会是什么？第一个产品的图片？

因为这个原因，这永远不会起作用：

@allProductsImage = Product.all.image

image 是单个产品的属性，您在整个记录集合上调用它。

还要与您的命名保持一致。在 JSON 响应中使用 snake_case 或 camelCase - 但不要混合使用。