現在、Ruby on railsにreact_railsとwebpackerを用いる形で開発を行なっております。
開発状況
development環境
モデル
Article
1 has_many :article_images, dependent: :destroy 2 accepts_nested_attributes_for :article_images
ArticleImage
1 belongs_to :article 2 mount_uploader :picture, PictureUploader
PictureUploader
1 〜省略〜 2 def store_dir 3 "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" 4 end 5 〜省略〜
app/javascript/components/maptest
import React, { Component } from 'react'; import { GoogleApiWrapper, Map, Marker,InfoWindow} from 'google-maps-react'; import { iconPath } from "../packs/assets.js.erb" 〜省略〜 <InfoWindow marker={this.state.activeMarker} visible={this.state.showingInfoWindow} > <div><a href={article_id} > <p> 記事名:{this.state.selectedPlace.title} </p> </a> <img src={iconPath}/> <p> {this.state.selectedPlace.introduction} </p> </div> </InfoWindow> 〜省略〜
app/javascript/packs/assets.js.erb
assets
1 <% helpers = ActionController::Base.helpers %> 2 3 export const iconPath = "<%= helpers.image_path('sample1.jpeg') %>"
現在、maptest.jsというファイルのinfowindowに<img>タグを付与しようと思っております。
色々とテキストなどを漁った結果、js.erbファイルにimage_pathなどを付与する形で実装すればいいとの答えを見つけました。
こちらでassets配下のファイルは参照できるようになったのですが、carrierwaveでuploadした画像をimgタグに差し込む実装を希望しています。
こちらのimage_pathに"/sample1.jpeg"と入力すると、localhost:3000/sample1.jpegという情報が渡されてしまい、画像を参照できません。
public/uploads/article_imagesのpathを参照するにはどの様なコードを記述すればいいでしょうか?
初歩的な質問で申し訳ございません。
何卒お答え頂けると幸いです。
あなたの回答
tips
プレビュー