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

I have a question that I have been stuck on for over a month and would appreciate any help. I have a Rails API with a model Items that has_one: itemPphoto. I am using activeStorage to upload the images to Cloudinary. I am also using Administrate gem which is where I use the form to upload the image to Cloudinary, and this part is working. The part that I am stuck on is in React, I want to display every image I upload per item, but I have had no luck so far. I hope I am displaying the code properly below, this is my first time. If you look carefully in my JS, I can display an image but I would have to call the specific cld.image(imageName) but I would like to find a way to map through my items and display image per item. Once again, thank you for your time and help.

Models : item.rb

class Item < ApplicationRecord
  has_one_attached :itemPhoto

  validates_presence_of :itemName,
                        :itemPrice
end

Controller: 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

In my FrontEnd 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**

CodePudding user response：

hope you are doing well

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

This line, instead of a constant image, generate images from cloudinary helper like:

Create a method that generates image from key

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

Create the generateImage helper like:

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

This will work for sure.

Happy coding :)