Rails API 推送 has_one：图像从模型项目到 Cloudinary 但不能

Question

我有一个 Rails API，模型项目 has_one: itemPphoto。我正在使用 activeStorage 将图像上传到 Cloudinary。我也在使用 Adminstrate gem，这是我使用表单将图像上传到 Cloudinary 的地方，这部分正在运行。我坚持的部分是在 React 中，我想显示我上传的每个项目的每张图片，但到目前为止我没有运气。我希望我在下面正确显示代码，这是我第一次。如果你仔细看我的 JS，我可以显示图像，但我必须调用特定的 cld.image(imageName)，但我想找到一种方法来映射我的项目并显示每个项目的图像。

型号：item.rb

class Item < ApplicationRecord
  has_one_attached :itemPhoto

  validates_presence_of :itemName,
                        :itemPrice
end

控制器：items_controller.rb

class Api::V1::ItemsController < ApplicationController

  def index
    @items = Item.all
    render json: @items.to_json(include: {
                                  itemPhoto: {
                                    include: :blob
                                  }
                                })
  end

  private

  def item_params
    params.require(:item).permit(:itemPhoto, :itemName, :itemPrice)
  end
end

在我的前端 3. itemList.js

import { Card } from 'react-bootstrap';
import PropTypes from 'prop-types';
import { Cloudinary } from '@cloudinary/url-gen';

const ItemList = ({ items }) => {
  const cld = new Cloudinary({
    cloud: {
      cloudName: 'cloudName',
    },
    url: {
      secure: true, // force https, set to false to force http
    },
  });
  const myImage = cld.image('p6a1m4z8avkvxt0gwhdssnnk6mbk');
  const myURL = myImage.toURL();

  return (
    <div className="container-fluid flex-column justify-content-center">
      {
        items.map((items) => (
          <Card
            key={items.id}
          >
            <table className="  m-3 col-10">
              <tbody className=" col-12">
                <tr className=" m-3 ">
                  <div className="m-3 col-12 flex-container justify-content-center">
                    <div className="col-12 d-flex justify-content-center">
                      <div className="col-12 d-flex justify-content-center">
                        <p className=" col-8  d-flex justify-content-center serviceCategoryTitle p-2">{ items.id }</p>
                        <p className=" col-8  d-flex justify-content-center serviceCategoryTitle p-2">{ items.itemName }</p>
                        <p className=" col-8  d-flex justify-content-center serviceCategoryTitle p-2">{ items.itemDescription }</p>
                        <p className=" col-8  d-flex justify-content-center serviceCategoryTitle p-2">{ items.itemPrice }</p>
                        <img src={myURL} alt=" " />
                        <img src={items.itemPhoto} alt=" " />
                      </div>
                    </div>
                  </div>
                </tr>
              </tbody>
              <hr className=" col-12 " />
            </table>
          </Card>
        ))
      }
    </div>
  );
};

ItemList.propTypes = {
  items: PropTypes.arrayOf(PropTypes.array).isRequired,
};

export default ItemList;
**strong text**

Answer 1

<img src={myURL} alt=" " />

这一行，而不是常量图像，从 cloudinary helper 生成图像，如：

创建一个从密钥生成图像的方法

<img src={generateImage(item.keyOfTheImageFromCLD) alt=" " />

像这样创建 generateImage 助手：

const generateImage = (imgKey) => cld.image(imgKey).toUrl()

Rails API 推送 has_one：图像从模型项目到 Cloudinary 但不能

Rails API pushes has_one: image from Model items to Cloudinary but cant

ruby-on-rails

cloudinary

reactjs