How to attach an image from assets to a ruby object in rails 5

Question

I'm trying to build a chess game, and I currently have the pieces being initialized through the game model, as so:

    class Game < ApplicationRecord
  scope :available, -> { where(white_player_id: nil).or(where(black_player_id: nil))}
  belongs_to :user
  has_many :pieces
  after_create :populate_game


  def populate_game
    #black pieces 

    (0..7).each do |i|
      Pawn.create(game_id: id, x_position: i, y_position: 6, color: "black", status: true, image: 'pwn_blk.png')
    end

the rest of the pieces are built the same way, but for sake of space I don't have those included.

My issue is, the image that represents the pieces is giving me trouble. I have the board being built out in javascript, one square at a time, and I am appending a span to the square that corresponds with the correct piece. I can get the piece id's to work great, but when I am trying to reference the image stored in the model (whether I am using span.setAttribute('img', "src=${piece.image}") or appending a seperate child to the span, or an entirely different child to the containing square) I receive an error in the console saying GET http://localhost:3030/games/assets/images/pwn_blk.png 404 (Not Found)so it is as if the application is trying to reach the image from a url endpoint rather than just pulling from the assets folder.

My one thought as to why this may be is this, we have the pieces being built out as a JSON endpoint and being retreived with an ajax request, as follows:

function getGamePieces(id) {
     $.ajax({
        url: `/get_pieces/${id}`,
        method: 'get',

     }).then(function (data) {
       let pieces = data; 
       // console.log(pieces);
       pieces.forEach(function (piece) {
        var row = $boardContainer.querySelector(`[data-x="${piece.x_position}"][data-y="${piece.y_position}"]`);


         if (row){
          var image = document.createElement('img');
          image.setAttribute('src', `./assets/images/pwn_blk.png`); 
          var span = document.createElement('span');
          span.className = 'piece';
          span.setAttribute('draggable', 'true')
          span.setAttribute('ondragstart', 'onDragStart(event);')
          span.setAttribute('id', piece.id);
          span.setAttribute('img', `src=${piece.image}`);
          // span.append(piece.image);
          row.appendChild(span);
         }
       })

     })    
}

It's a tad messy right now because I have been experimenting a lot trying to figure out how to make it work and I'm coming up short. Any suggestions on how to get the image to pull directly from the assets folder?

After typing it out, I think my issue is in the ajax request, the JSON only has access to the image file path name, but the actual images aren't stored with the JSON being pulled in with the AJAX request. so that request can't access the actual images. I'm going to try to find a workaround for this. — Josh Bangle
– Josh Bangle, Commented Dec 9, 2019 at 23:20

Paulo Fidalgo · Accepted Answer · 2019-12-09 23:58:59Z

1

You should use image_path to get the path of the image in the assets. https://api.rubyonrails.org/v5.2.0/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-image_path

Then use a data attribute on your element to set the image url, so you can retrieve it later with JavaScript.

answered Dec 9, 2019 at 23:58

Paulo Fidalgo

22.4k7 gold badges105 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh Bangle · Accepted Answer · 2019-12-10 01:28:54Z

0

The issue was with image fingerprinting in rails, only the hard-coded image names would be fingerprinted when compiling, and not names given as a variable or called using piece.image. I used https://github.com/alexspeller/non-stupid-digest-assets in order to remove the necessity for pieces to be fingerprinted, and adjusted the filepath to the images to look like span.innerHTML =; and they now load properly.

answered Dec 10, 2019 at 1:28

Josh Bangle

2614 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to attach an image from assets to a ruby object in rails 5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related