I have a card component which has a structure for an image like this. One image can't be loaded because of (HTTP Status: 403). So I want to replace it with a default one. So I looked it up and learn that I can use #error.
<div class="card-thumbnail">
<img
:src="cardImage"
alt=""
#error="$event.target.src = '~/assets/images/error.jpeg'"
/>
</div>
However this code gives me error that "error.jpeg" can not be found. My folder structure is correct because without #error and a src like this:
src="~/assets/images/error.jpeg"
I can actually see my error.jpeg. So what I am doing wrong here ?
Based on this you need to use require because images inside assets directory are considered as modules :
#error="$event.target.src = require('~/assets/images/error.jpeg')"
Related
The framework I am using is .NET 6.
Previously, the src attribute of the image element like this:
<img src="#ImageServer/images/BG.png" />
The variable of ImageServer stores the URL of the image server.
Recently, I need to add a token in it for anti-theft chain.
I tried it like this:
<img src="#ImageServer/images/BG.png#GetToken()" />
However, after the program is run, the src turns out to be this:
<img src="https://www.aaa.com/images/BG.png#GetToken()" />
What's wrong with my code and how can I render two variables in src attribute? Thank you.
The text just before the # is causing the render engine to not parse the # as a server-side code indicator.
Make the whole value server-side calculated, instead of outputting small pieces of server-side values into client-side values. For example:
<img src="#(ImageServer + "/images/BG.png" + GetToken())" />
This way the view engine sees everything within the #() as a server-side expression and outputs the result of that expression.
Similarly, with string interpolation:
<img src="#($"{ImageServer}/images/BG.png{GetToken()}")" />
My App.vue has a V-for to create a Card Component, this Card receives the data through a Prop. Everything works fine except for the image.
In my App.vue
<DevJobCard :Job="item" v-for="item in filterSearch" v-bind:key="item.id"/>
The urls that my json provides
"logo": "./assets/logos/scoot.svg",
At the moment the only solution I have found is to put the images in the static folder and use this code so that you can at least see it in production. Help me please :( I haven't made any progress in 2 days
<img v-on="check" :src="'/static' + Job.logo.substring(1)" alt="">
I would like to know how to make it work if they are in assets or in static
If you want to load them by webpack you can simply use :src="require('path/to/file')". Try this code:
<img v-on="check" :src="require('/static' + Job.logo.substring(1))" alt="">
Your project is built, and image paths in the build can change after the build process.
You can try using the require() function. It works at build time:
// v-for="item in yourObject"
<img :src="require('./assets/logos/' + item.logo)" />
This way, webpack will know it needs to change the path to post-build one.
You may want to check this question out: https://stackoverflow.com/a/57350255/1722529
I have an image for a vue-cli project, and it works fine with the following path:
<img src="../assets/images/banner/hero_2x_w4eyw5_c_scale,w_2086.jpg" alt="">
But when I insert image URLs with srcset for responsive image breakpoints, I see a compile error.
Here is the generated image code:
<img sizes="(max-width: 3840px) 100vw, 3840px"
srcset="../assets/images/banner/hero_2x_w4eyw5_c_scale,w_320.jpg
320w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_1099.jpg
1099w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_1647.jpg
1647w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_2086.jpg
2086w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_2460.jpg
2460w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_2848.jpg 2848w,
../assets/images/banner/hero_2x_w4eyw5_c_scale,w_3214.jpg
3214w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_3556.jpg
3556w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_3805.jpg
3805w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_3840.jpg 3840w"
src="../assets/images/banner/hero_2x_w4eyw5_c_scale,w_3840.jpg" alt="">
Error!
The error occurs because vue-loader does not handle commas in srcset filenames/URLs. It simply splits the srcset string by ,, so the first srcset value of ../assets/images/banner/hero_2x_w4eyw5_c_scale,w_320.jpg is parsed as ../assets/images/banner/hero_2x_w4eyw5_c_scale, leading to the Module not found error in your screenshot.
MDN docs indicate that the srcset values are comma-delimited, and it's unclear whether the commas are permitted within the filenames/URLs. In any case, you could resolve the build errors by renaming your files to remove the commas, and updating the references in your srcset to match.
To use VueJS data variables in my hbs view engine I need to add this \ before the variable so it looks like this for example \{{name}} - this would show the name from vue data variable name.
Now I cannot find a way to do this with img src.
<div v-for="item in itemsImgArr">
<img src="{{item.img}}">
\{{item.img}} - returns me a normal img link
</div>
I have tried this option: <img src="\" + "{{ item.img }}"> but it doesn't work. I've tried to experiment but I cannot get the link. Maybe someone could help ?
So if anybody uses Handlebars with VueJS you can show images like this:
<img :src="item.img"> and it works perfectly!
I'm trying to add an image in an HTML report template. The image is stored in sys$FileDescriptor. I found some instructions for docx templates, but no luck so far with html templates.
I also tried using FileDescriptor.name as src field, but the file specified doesn't exist
In the end I managed to insert an image in an html template for pdf generation with this code:
<img src="../work/app-core/filestorage/${headerRow.fields.logoYear}/${headerRow.fields.logoMonth}/${headerRow.fields.logoDay}/${headerRow.fields.logoId}.${headerRow.fields.logoExt}" width="220" height="220"/>
The needed fields are obtained in sql from sys_file.update_ts with "to_char" Postgres function to allow for the correct format of the fields (YYYY, MM, DD)
At the moment YARG and CUBA Reporting do not provide means to insert images into HTML-reports similarly to DOCX/XLSX.
But pictures could be inserted/embedded with the img-tag.
src could be a link to picture:
<img src="http://localhost:8080/images/SomePicture.jpg" height="68" width="199" border="0" align="right"/>
Or you can embed a bitmap (your appproach with variables is also useable):
<img alt='SomePicture.png' src='data:image/png;base64,iVBORw0K ..... AcEP9PwxD0hNKK1FCAAAAAElFTkSuQmCC' style='max-width: 100%;'/>
Thank you for your question. The platform documentation is going to be updated soon.