I am facing a problem with images in my pages. In my data base I mentioned the image path like:
"/images/smallimages/sandal1.png "
It's working fine and displaying the image in my view on my local host but after uploading the code to the server the images are not displaying. Do I need to place the tilde(~) symbol in the image URL?. And I am binding image path like below:
<a href="#Html.DisplayFor(m=>m.larImagePath1)" class="MagicZoom" id="Zoomer" rel="selectors-effect-speed:100">
<img src="#Html.DisplayFor(m=>m.medImagePath1)" /></a><br/>
<!-- selector with own title -->
<a href="#Html.DisplayFor(m=>m.larImagePath1)" rel="zoom-id:Zoomer;" rev="#Html.DisplayFor(m=>m.medImagePath1)">
<img src="#Html.DisplayFor(m=>m.smaImagePath1)"/></a>
<!-- selector without title and with own zoom window size -->
<a href="#Html.DisplayFor(m=>m.larImagePath2)" rel="zoom-id:Zoomer;selectors-effect-speed: 200" rev="#Html.DisplayFor(m=>m.medImagePath2)">
<img src="#Html.DisplayFor(m=>m.smaImagePath2)"/></a>
You should be using the Url.Content helper for image URLs, like so:
<img src='#Url.Content("~" + Model.smaImagePath1)' />
Related
I'm trying to show the employee's picture (fields: hr_employee.image) on a website template. But the template just show the default picture for employees instead of the loaded image.
I tried this:
<span t-field="employee.image" t-options="{'widget': 'image', 'style': 'height:200px;width:200px;'}"/>
And also, tried this:
<div t-field="employee.image" t-options="{'widget': 'image', 'style': 'height:200px;width:200px;'}"/>
And this:
<img t-field="employee.image" t-options="{'widget': 'image', 'style': 'height:200px;width:200px;'}"/>
Template just show this:
I'm afraid accessing images isn't as simple as that since you need sudo access to get them. If you're accessing the built-in employee module then the base model already provides this sudo access for you. Instead use the following:
<img t-att-src="image_data_uri(employee.image_1920)" style="max-height:85pt;max-width:90%"/>
The 1920 refers to the image's size. You can also use employee.image_1024, employee.image_512, employee.image_256 or employee.image_128
If you're trying to access images from your own custom module then you'll need to update the .py file to access the image and provide its public url.
You can use website.image_url to define the image src attribute.
<img t-att-src="website.image_url(employee, 'image_medium')" class="img shadow rounded" alt="Employee"/>
The above code is taken from website_hr
module (aboutus template)
So This is correct way to display image in vue
<img class="cur-img" src="~#/assets/img/test.png" alt="temp-img">
However, the following way is incorrect, if templateImg is a string represent by "~#/assets/img/test.png"
<div v-for="(item,index) in items" :key="index">
<img :src="item.templateImg" alt="template-img">
</div>
Is there any way to fix it?
Usually, you will want to import the asset in your JS code. For example:
<template>
<img :src="image" />
</template>
<script>
import testImage from "#/assets/img/test.png"
export default {
image: testImage
}
</script>
Use the following:
<img :src="require(item.templateImg)">
When we are binding src to a variable, it is giving its raw value to the img tag, which means it's expecting a full resource URL. It's up to us to provide a complete data URL to that resource, which means creating a corresponding absolute resource URL out of the relative asset path that we're using.
Thus, we need to fetch it using require(). If you are using an absolute path like a base64 data image URL, or compete image URLs, then in such cases you don't need require(), and your current code will work just fine.
I am trying to render a html string into a div using v-html but it's not able to resolve the image path.
The image is stored as follows /src/assets/logo.png .
My project has already setup the copy-webpack-plugin.
The html string is as follows:
<img src="../assets/logo.png" /><br/><p>Hello World</p>
i have a issue with a prestahop module, it's Advanced Top Menu.
I a have a submenu with my products and it show the image cover of the product. But, i want to show a another image which is a second image of the product not the cover image.
I sought where can i do that and I find the file here : /themes/at_manor/templates/catalog/_partials/miniatures/product.tpl
A part of the file product.tpl
<a href="{$product.url}" class="thumbnail product-thumbnail">
<img
class="img-fluid"
src = "
{$product.cover.bySize.large_default.url}"
alt = "{if
!empty($product.cover.legend)}{$product.cover.legend}{else}
{$product.name|truncate:30:'...'}{/if}"
data-full-size-image-
url = "{$product.cover.large.url}"
>
{if isset($cfg_product_one_img)
&& $cfg_product_one_img}
<span class="product-
additional" data-idproduct="{$product.id_product}"></span>
{/if}
</a>
Based on the starter kit I have created a new app. I would like to link the different pages to a set of icons in the app-toolbar.
I got it working with:
<a href="/main-stream">
<paper-icon-button icon="icons:view-stream"></paper-icon-button>
</a>
But I think I am missing something here. Is there a better way?
in your app-Component you have a variable called page. This variable indicates the current view that is shown. To modify its value you can use the iron-selector like in the demo app.
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="[[rootPath]]view1">View One</a>
<a name="view2" href="[[rootPath]]view2">View Two</a>
<a name="view3" href="[[rootPath]]view3">View Three</a>
</iron-selector>
Copied from:https://github.com/PolymerElements/polymer-starter-kit/blob/master/src/my-app.html