I'm trying to add my first image to my html.erb page.
我正在尝试将我的第一张图片添加到我的html.erb页面。
I added the image to the assets image folder and then added the following to the page
我将图像添加到资产图像文件夹,然后将以下内容添加到页面中
<%= image_tag("logo.png") %>
and a long number is displayed instead of the image.
并显示一个长数字而不是图像。
<img alt="Logo 0832b7f341b4a86866d5ebbefb333a263da300acd97a6eccbc25263b235ccdc5" src="/assets/logo-0832b7f341b4a86866d5ebbefb333a263da300acd97a6eccbc25263b235ccdc5.png">
and if I use the following
如果我使用以下内容
<%= link_to(image_tag("logo.png", :alt => "logo"), "/", class: "navbar-brand navbar-brand-img") %>
Only the words "logo" are displayed.
仅显示“徽标”字样。
3 个解决方案
#1
You can find the explanation on APIdock:
您可以在APIdock上找到解释:
image_tag(source, options={}) public
image_tag(source,options = {})public
Returns an HTML image tag for the source. The source can be a full path or a file.
返回源的HTML图像标记。源可以是完整路径或文件。
Options
You can add HTML attributes using the options. The options supports two additional keys for convenience and conformance:
您可以使用选项添加HTML属性。这些选项支持两个附加键以方便和一致:
- :alt - If no alt text is given, the file name part of the source is used (capitalized and without the extension)
:alt - 如果没有给出alt文本,则使用源文件名部分(大写且没有扩展名)
- :size - Supplied as “{Width}x{Height}” or “{Number}”, so “30x45” becomes width=“30” and height=“45”, and “50” becomes width=“50” and height=“50”. :size will be ignored if the value is not in the correct format.
:size - 提供为“{Width} x {Height}”或“{Number}”,因此“30x45”变为width =“30”,height =“45”,“50”变为width =“50”和height =“50”。 :如果值的格式不正确,将忽略size。
The numbers you see there are added to the filenames during deployment as a caching mechanism - browsers can cache these files indefinitely since the filenames will change each time they are changed.
您看到的数字在部署期间作为缓存机制添加到文件名中 - 浏览器可以无限期地缓存这些文件,因为文件名每次更改时都会更改。
To precompile these files and add these numbers to the filenames use rake assets:precompile command.
要预编译这些文件并将这些数字添加到文件名,请使用rake assets:precompile命令。
#2
When you use the asset pipeline, it add md5 to the image link.
使用资产管道时,它会将md5添加到图像链接。
Provided that the pipeline is enabled within your application (and not disabled in the current environment context), this file is served by Sprockets. If a file exists at public/assets/rails.png it is served by the web server.
如果在您的应用程序中启用了管道(并且未在当前环境上下文中禁用),则此文件由Sprockets提供。如果public / assets / rails.png中存在文件,则由Web服务器提供服务。
Alternatively, a request for a file with an MD5 hash such as public/assets/rails-af27b6a414e6da00003503148be9b409.png is treated the same way. How these hashes are generated is covered in the In Production section later on in this guide.
或者,对具有MD5哈希的文件的请求(例如public / assets / rails-af27b6a414e6da00003503148be9b409.png)也以相同的方式处理。如何生成这些哈希值将在本指南后面的“生产中”部分中介绍。
see more in coding-links-to-assets
在编码 - 链接到资产中看到更多
#3
Change your code as below:
更改您的代码如下:
<%= link_to image_tag("logo.png", :alt => "logo" , class:"navbar-brand navbar-brand-img"), "/" %>
Hope it will help you.
希望它会对你有所帮助。
#1
You can find the explanation on APIdock:
您可以在APIdock上找到解释:
image_tag(source, options={}) public
image_tag(source,options = {})public
Returns an HTML image tag for the source. The source can be a full path or a file.
返回源的HTML图像标记。源可以是完整路径或文件。
Options
You can add HTML attributes using the options. The options supports two additional keys for convenience and conformance:
您可以使用选项添加HTML属性。这些选项支持两个附加键以方便和一致:
- :alt - If no alt text is given, the file name part of the source is used (capitalized and without the extension)
:alt - 如果没有给出alt文本,则使用源文件名部分(大写且没有扩展名)
- :size - Supplied as “{Width}x{Height}” or “{Number}”, so “30x45” becomes width=“30” and height=“45”, and “50” becomes width=“50” and height=“50”. :size will be ignored if the value is not in the correct format.
:size - 提供为“{Width} x {Height}”或“{Number}”,因此“30x45”变为width =“30”,height =“45”,“50”变为width =“50”和height =“50”。 :如果值的格式不正确,将忽略size。
The numbers you see there are added to the filenames during deployment as a caching mechanism - browsers can cache these files indefinitely since the filenames will change each time they are changed.
您看到的数字在部署期间作为缓存机制添加到文件名中 - 浏览器可以无限期地缓存这些文件,因为文件名每次更改时都会更改。
To precompile these files and add these numbers to the filenames use rake assets:precompile command.
要预编译这些文件并将这些数字添加到文件名,请使用rake assets:precompile命令。
#2
When you use the asset pipeline, it add md5 to the image link.
使用资产管道时,它会将md5添加到图像链接。
Provided that the pipeline is enabled within your application (and not disabled in the current environment context), this file is served by Sprockets. If a file exists at public/assets/rails.png it is served by the web server.
如果在您的应用程序中启用了管道(并且未在当前环境上下文中禁用),则此文件由Sprockets提供。如果public / assets / rails.png中存在文件,则由Web服务器提供服务。
Alternatively, a request for a file with an MD5 hash such as public/assets/rails-af27b6a414e6da00003503148be9b409.png is treated the same way. How these hashes are generated is covered in the In Production section later on in this guide.
或者,对具有MD5哈希的文件的请求(例如public / assets / rails-af27b6a414e6da00003503148be9b409.png)也以相同的方式处理。如何生成这些哈希值将在本指南后面的“生产中”部分中介绍。
see more in coding-links-to-assets
在编码 - 链接到资产中看到更多
#3
Change your code as below:
更改您的代码如下:
<%= link_to image_tag("logo.png", :alt => "logo" , class:"navbar-brand navbar-brand-img"), "/" %>
Hope it will help you.
希望它会对你有所帮助。