Question

我正在为我的单页应用使用轮播滑块。一切都很完美，唯一的问题是当我运行服务器时图片不会出现。在浏览器上，它给了我一个错误＆＃39; GET http://localhost:3000/assets/images/car.jpg 404（Not Found）＆＃39;对于每个图像，以及它们各自的路径。我已经尝试了大多数在线解决方案，但似乎没有任何效果。

<body>
        <div class="carousel-container">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="../assets/images/VedadoPoster.jpg" alt="Poster" />
      </div>

      <div class="item">
        <img src="../assets/images/car.jpg" alt="Car" />
      </div>

      <div class="item">
        <img src="../assets/images/beach.jpg" alt="Beach" />
      </div>

      <div class="item">
        <img src="../assets/images/pool.jpg" alt="Flower"/>
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</body>

Answer 1

请试试这个......

希望这对你有用...............

Answer 2

如果您有/assets/images路径中的图片，则需要更改路径。您可以将代码更改为，

   <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="/assets/images/VedadoPoster.jpg" alt="Poster" />
      </div>

      <div class="item">
        <img src="/assets/images/car.jpg" alt="Car" />
      </div>

      <div class="item">
        <img src="/assets/images/beach.jpg" alt="Beach" />
      </div>

      <div class="item">
        <img src="/assets/images/pool.jpg" alt="Flower"/>
      </div>
    </div>

或者，

 <div class="carousel-inner" role="listbox">
      <div class="item active">
         <%= image_tag 'VedadoPoster.jpg' %>
      </div>

      <div class="item">
        <%= image_tag 'car.jpg' %>
      </div>

      <div class="item">
        <%= image_tag 'beach.jpg' %>
      </div>

      <div class="item">
        <%= image_tag 'pool.jpg' %>
      </div>
    </div>

例如：

image_tag("icon")
# => <img alt="Icon" src="/assets/icon" />
image_tag("icon.png")
# => <img alt="Icon" src="/assets/icon.png" />
image_tag("icon.png", size: "16x10", alt: "Edit Entry")
# => <img src="/assets/icon.png" width="16" height="10" alt="Edit Entry" />
image_tag("/icons/icon.gif", size: "16")
# => <img src="/icons/icon.gif" width="16" height="16" alt="Icon" />
image_tag("/icons/icon.gif", height: '32', width: '32')
# => <img alt="Icon" height="32" src="/icons/icon.gif" width="32" />
image_tag("/icons/icon.gif", class: "menu_icon")
# => <img alt="Icon" class="menu_icon" src="/icons/icon.gif" />

Here is the reference

我的旋转木马图片不会出现在滑块上。我得到了一个＆＃39; GET local_image_path 404（未找到）＆＃39;浏览器错误

2 个答案: