Question

关于来自this笔的示例6，我需要使用存储在资源/图像中的图像，而不是像示例6中那样通过href链接获得的图像。看起来在CSS和CSS中都需要更改代码。在HTML中，但作为Rails的新手，我无法弄清楚它们必须是什么。

首先，这个HTML：

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
        </a>

位于此处：

      <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
    </a>
  </div>

然后有一个CSS代码，这里：

.example6 .navbar-brand{ 

    .example6 .navbar-brand{ 

    background: url(https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png) center / contain no-repeat;
  width: 200px;

}

我尝试将CSS更改为

    background: <%= image_tag("myPETS_logo_36_48.png", class: "navbar-brand", id: "navbar-logo") %> center / contain no-repeat;
  width: 200px;

但即使该部分是正确的，如果不更正当前的HTML代码也无法正常工作，

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text

那么，要从资产/图像中获取图像而不是通过href链接做什么呢？

Answer 1

如果我理解正确;你想将（动态）图像网址放入CSS中。要做到这一点，你必须内联解决它，如下所示：

<a class="navbar-brand text-hide" href="http://disputebills.com" style="background: url('<%= image_url('myPETS_logo_36_48.png') %>') center / contain no-repeat;" > Brand Text </a>

image_tag会创建一个img标记，但您实际上是在寻找生成图像路径或网址的帮助程序。有关详细信息，请参阅rails 5.0+ documentation和/或older rails documentation。

或者，您可以通过将图像放在/public文件夹中并直接从CSS引用它来解决它，如@ Sebastian-Palma所示。

公共文件夹中的图像可以从项目根目录获得，因此，不需要图像路径帮助程序，它只是：

.navbar-brand {
  background: url("myPETS_logo_36_48.png") center / contain no-repeat;
}

在Bootstrap 3中使用资产/图像中的图像

1 个答案: