常時画像表示をさせたい。

Question

NewsAPIを使ったオリジナルニュースサイトを実装しています。一通り見た目は完成しているのですが、時たまなぜか「ArgumentError Nil location provided. Can’t build URI」になり、image_tagの画像データがnilになってしまいます。時間が経てば元どおりにブラウザ表示できるのですが、時々このようなことが起きてしまいます。
仮説としてJSONのデータが常時うまく引数に渡されないのが原因だと思っていますが、詳細が分からずにいます。調べていますが、類似したケースがなかなか見つからずに困っています。
これでは、ニュースサイトとしては未成熟となってしまいますので、正式なコードを記述したいと思っています。
APIのデータを常時保存共有して、画像を表示できるようするにはどのようにコードを記述したらいいでしょうか？恐縮ですが、どなたかご存知でしたらご教授願えますでしょうか？下記はエラー文とコードになります。

コード
ArgumentError in News#index
Showing /Users/hiromu/original/app/views/news/index.html.erb where line #26 raised:

Extracted source (around line #26):
24
25
26
27
28
29

          </div>
          <div class="image">
            <%= image_tag article["urlToImage"],:size =>'240x160' %>
          </div>
          <div class="content">
            <%= article["description"] %>

app/controllers/news_controller.rb

class NewsController < ApplicationController
  require "open-uri"
    def index
        news_api_key = ENV["NEWS_API_KEY"]
        uri = "http://newsapi.org/v2/top-headlines?country=jp&apiKey=#{news_api_key}"
        article_serialized = open(uri).read
        @articles = JSON.parse(article_serialized)
    end
end

app/views/news/index.html.erb

<main class="main">
  <div class="inner">
    <% if user_signed_in? %>
      <div class="greeting">
        <%= link_to current_user.name, class: :greeting__link%>
      </div>
    <% end %>
  </div>
  <header>
    <p class="font">Powered by <a href="https://newsapi.org", class="btn">News API</a></p>
  </header>
  <div class="articles">
    <% @articles["articles"].each do |article| %>
      <div class="article">
        <div class="title">
          <%= link_to article["title"], article["url"] %>
        </div>
        <div class="wrapper">
          <div class="date">
            <%= article["publishedAt"] %>
          </div>
          <div class="source">
            <%= article["source"]["name"]%>
          </div>
          <div class="image">
            <%= image_tag article["urlToImage"],:size =>'240x160' %> #この部分になります。
          </div>
          <div class="content">
            <%= article["description"] %>
          </div >
        </div>
      </div>
    <% end %>
  </div>
</main>

Comments

[m.ts10806]

＞プログラミング初心者で
起きている問題や要件とは無関係でもありますし、
質問に「初心者アイコン」をつけるだけにとどめられたほうが良いです。

あと、可能なら、文章は適宜改行を（赤の他人に見せるわけだし、要件を伝えるために読みやすさは大事）

[murohi-08]

修正しました。失礼しました。ご教授ありがとうございました。

[gouf]

「image_tag(article["urlToImage"] || '#', :size =>'240x160')」に書き換えた場合、何か変化は見られますか?
(nil が来た場合の回避コードを記述したい)

[murohi-08]

ご回答くださりありがとうございます。一応今はブラウザ表示はうまくいっています。コードもgouf様がご提示くださった通りに記述してみました。これでArgumentErrorが出なければいいですが・・・
nilがきた場合の回避コードとなりますと、unlessメソッドを使った記述になりますでしょうか？
とりあえずコードを書いてみました。↓
<div class="image">
<% unless @article.image.blank? %>
<%= image_tag article["urlToImage"] || '#', :size =>'240x160' %>
<% end %>
</div>
ご教授いただけれれば幸いです。よろしくお願いします。

[siruku6]

5行もいらなくて、これだけで大丈夫ですよ

<div class="image">
<%= image_tag article["urlToImage"] || '#', :size =>'240x160' %>
</div>

これで、`article["urlToImage"]`が nil なら '#' が image_tagの第一引数として読み込まれます

[murohi-08]

今は正常に表示されています。これでnilエラーが解決したかは分かりませんが、大丈夫だと思います。APIデータを使っているとlocalサーバーにうまく引き渡されなくなるみたいですね。
お時間いただいて本当にありがとうございました。

Answer 1

nilの場合の表示をセットしました。

<div class="image"> <%= image_tag article["urlToImage"] || '#', :size =>'240x160' %> </div>