So, my next problem on a rails project is the following: I am using the asset pipeline to serve my assets. Now I want to include inline css into a view with a background image. because of the asset pipeline I am just able to use the helpers that rails offers from ground. But the problem is, that every helper (except image_tag is delivering the wrong output).
image_url('work-1.png') # => /images/work-1.png
image_path('work-1.png') # => /images/work-1.png
asset_url('work-1.png') # => /work-1.png
asset_path('work-1.png') # => /work-1.png
image_tag('work-1.png') # => <img ..........> # Only right tag!
Yeah, that didn't help me. And also all other questions I found about this topic.
Would be nice to know what the issue is with this. Thanks!
The image_tag helper is the only method out of your list that will actually produce an html tag.
The image_url helper actually use the image_path helper to compute the full path to an image (eg. http://www.example.com/image/image.png)
The image_path helper produces the relative path to an image (eg. /images/foo.png)
image_tag output
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" />
image_path output
image_path("edit") # => "/images/edit"
image_path("edit.png") # => "/images/edit.png"
image_path("icons/edit.png") # => "/images/icons/edit.png"
image_path("/icons/edit.png") # => "/icons/edit.png"
image_path("http://www.example.com/img/edit.png") # => "http://www.example.com/img/edit.png"
Another question answered myself.
I had the wrong path in the image_path helper. So, if you have a missing image (that cannot be found by the asset pipeline, the helper is falling back to the /images path.
Let's imaging I want to include a path of ph/image-1.png into my document. image_path('ph/image-1.png') will put the right directory with the path. Otherwise, if you are going to use image_path('image-1.png') it will use the /images directory in front of the image you are going to use. But this cannot be found. This was my fault.
To wrap it up, here is the summary:
image_path('ph/image-1.png') # => /assets/ph/image-1.png
image_path('image-1.png') # => /images/image-1.png
Related
Nextjs Image component wont load my images, I've tried everything I've come across still nothing.
<div>
{output?.map((item) => (
<div>
{console.log(`${apiUrl}${item.localImage}`)}
<Image
loader={(item) => {
return `${apiUrl}${item.localImage}`;
}}
alt={item.title}
src={`${apiUrl}${item.localImage}`}
layout="fill"
objectFit="contain"
// height={98}
// width={77}
/>
</div>
))}
</div>
The console.log shows the correct image location.
http://localhost:3030/images/b/Painting-with-Both-Hands--Sophie-Walbeoffe.jpg
http://localhost:3030/images/b/DK-The-History-Book.jpg
http://localhost:3030/images/b/Cradle-to-Cradle--(Patterns-of-Life).jpg
http://localhost:3030/images/b/Upstarts.jpg
I have added localhost to next.config.js with the port and without. I think its something to do with the loader.
So what is missing?
I think you can change the code for the loader to:
loader={() => {
return `${apiUrl}${item.localImage}`;
}}
I need to show an image in frontend.
<div class="col-md-12">
<f:debug>{user.image.0}</f:debug>
<f:if condition="{user.image}">
<f:then>
<f:image image="{user.image.0}" width="100" alt="" />
</f:then>
<f:else>
</f:else>
</f:if>
</div>
Debug of user.image gives this
TYPO3\CMS\Extbase\Domain\Model\FileReferenceprototypepersistent entity (uid=34, pid=8)
uidLocal => protected 16 (integer)
originalResource => protected NULL
uid => protected 34 (integer)
_localizedUid => protected 34 (integer) modified
_languageUid => protected 0 (integer) modified
_versionedUid => protected 34 (integer) modified
pid => protected 8 (integer)
But in frontend I get this error
1476107295: PHP Catchable Fatal Error: Object of class TYPO3\CMS\Extbase\Persistence\ObjectStorage could not be converted to
string in
I have tried to use both image=" and src=" but nothing works.
Does it have anything to do with GraphicsMagick not being installed on the server?
The reason for your problem probably is the usage of {user.image.0}.
While in earlier versions of fluid you could find the first image of an array in this way, in newer versions the array needs another handling:
<f:for each="{user.image}" as="userimage" iteration="iterator">
<f:if condition="{iterator.isFirst}"><f:image image="{userimage}" width="100" alt="" /></f:if>
</f:for>
I am having a weird problem. I have a aws serverless app running react/redux and node. I am also using Ant design with react.
When I deploy to aws, inline css is being injected (I think).
On my local machine the following code:
<Col xs={36} sm={12}>
<FormItem label={showLabel('Date and Time ', this.props.deviceSize)}>
{(<DatePicker
placeholder="Date and Time"
size="large"
showTime={{ format: 'HH:mm:ss' }}
format="YYYY-MM-DD HH:mm:ss"
onChange={(_, val) => {
this.setState({ date: val });
}}
/>)}
</FormItem>
</Col>
produces:
<div class="ant-form-item-control-wrapper">
<div class="ant-form-item-control">
<span class="ant-form-item-children">
<span class="ant-calendar-picker ant-calendar-picker-large">
...
</span>
</span>
</div>
</div>
But once I deploy to aws, it produces the following:
<div class="ant-form-item-control-wrapper">
<div class="ant-form-item-control">
<span class="ant-form-item-children">
<span class="ant-calendar-picker ant-calendar-picker-large" style="width: 195px;">
<div>
...
</div>
</span>
</span>
</div>
</div>
style="width: 195px;" has been added. This is throwing off my design.
How would I go about solving this issue?
Update 1
I realized if showTime and format attributes are removed the deployed aws rendering behaves as expected without the injected style="width: 195px;"
Update 2
So this style="width: 195px;" injection seemed weird so I searched ant-design/ant-design github for this string. And it came up three places.
1) components/date-picker/tests/snapshots/demo.test.js.snap
2) site/theme/template/Home/BannerImage.jsx
3) components/form/tests/snapshots/demo.test.js.snap
Seems like I will have to figure out what causes that width to be added. Or find some way to remove that style after render (although that feel like that would be the wrong way to go about solving this).
I have an image tag in a database field which I want to show the image in the index and detail views within an MVC project. Currently the both pages just show the text
The view code for that field is:
<td>
#Html.DisplayFor(modelItem => item.QRCode)
</td>
How to to code the view pages to show the image the link points to rather than the link text?
Cheers,
Kevin.
According to this link : displaying image from db in Razor/MVC3
Two possibilities.
Write a controller action instead which given an image id will return this image:
public ActionResult GetImage(int id)
{
byte[] image = ... go and fetch the image buffer from the database given the id
return File(image, "image/jpg");
}
and then:
<img src="#Url.Action("GetImage", "SomeController", new { id = item.Id })" alt="#item.CountryName" />
Obviously now in your initial model you don't need the Image property. This will be retrieved subsequently in the controller action responsible for that.
Another possibility is to use data URI scheme to embed the images as base64 strings but it might not be widely supported by all browsers:
<img src="data:image/jpg;base64,#(Convert.ToBase64String(item.Image))" alt="#item.CountryName" />
You don't need a controller action in this case as the images are directly embedded into your markup as base64 strings.
Happy Coding..!!
The following code works for the index view:
<td>
<img src="#Url.Content(item.QRCode)" alt="Image" />
</td>
Thanks for the help.
The problem I now have is getting the image to show in the details page. The code I have tried is:
<dd>
<img src=#Model.QRCode alt="" />
</dd>
The other columns that work on the details page use:
<dd>
#Html.DisplayFor(model => model.TestingFrequency)
</dd>
But I have tried many combinations of code and I can't seem to get it to work.
Any further tips would be appreciated.
I'd like to know if it's possible to pass an array to a rails image tag. The array would include a series of png images and I'd like for the view to display those images on rotation.
Does anyone know how to do that?
This does not work.
<div class="img-circle"><%= image_tag ["researcher.png", "book.png"], size: "150x150" %></div>
I can't seem to find instructions (the rails guides suggest that you can pass an array to the video tag helper so I was wondering if there were a way to do the same thing with images).
Thank you very much.
To extend #Rich Peck's answer, what about creating a helper to do that, it's cleaner I think :
module ApplicationHelper
def images_tag(array_of_images, options={})
images = []
if array_of_images.is_a? Array
array_of_images.each do |image|
images << image_tag(image, size: options[:size], class: options[:class])
end
end
content_tag :div, images.join("\n").html_safe, class: "img-circle"
end
end
then, in your view :
<%= images_tag ["researcher.png", "book.png"], size: "150x150", class: "class-img" %>
will output :
<div class="img-circle">
<img alt="researcher" class="class-img" height="150" src="/assets/researcher.png" width="150">
<img alt="book" class="class-img" height="150" src="/assets/book.png" width="150">
</div>
Interesting - I think you're only able to use one image per image_tag currently
As you can see from the API, the method is a way to post the <img src=""> HTML tag, and I believe that it only does this once (does not replicate for multiple images)
A way to achieve what you want would be to use a loop, although it's kind of bloated for what you're looking for here:
<% images = %w(reearcher.png book.png) %>
<% for image in images do %>
<%= image_tag image, size: "150x150" %>
<% end %>