带有 bootstrap 的映像的 Rails 路径

Rails path for images with bootstrap

提问人:ffouquet42 提问时间:6/27/2022 更新时间:6/27/2022 访问量:219

问:

您好,我想使用带有图像的 boostrap(在我的 rails 应用程序中)Heroes 并使用它,我需要使用 img 而不是 image_tag但找不到我的图像。这里是代码

<div class="px-4 pt-5 my-5 text-center border-bottom">
    <h1 class="display-4 fw-bold">Centered screenshot</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
        <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
        <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
      </div>
    </div>
    <div class="overflow-hidden" style="max-height: 30vh;">
      <div class="container px-5">
        <img src="/images/test2.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
      </div>
    </div>
  </div>

我也测试了 src=“test2.png” , “/test2.png” 等...

image_tag的问题是我无法添加宽度、高度或加载参数。

HTML CSS Ruby-on-Rails 图片 twitter-bootstrap

评论

0赞 lokesh khinchi 6/27/2022
请分享一个像 CodePen 这样的工作示例

答:

1赞 Baldrick 6/27/2022 #1

您可以使用:image_path

<img src="<%= image_path('test2.png') %>" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">

请注意,您还可以使用和指定任何参数,包括宽度、高度、样式、类...查看示例 https://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tagimage_tag