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.
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()}")" />
I'm trying to display background image in a component.
If I understand it well, we must use that:
<div class="food-icon"
:title="tooltip"
:style="{backgroundImage: `url(${require(image)})`}">
But I get this error
Error in render: "Error: Cannot find module '../assets/fast-food.jpg'"
I try it with:
<div class="food-icon"
:title="tooltip"
:style="{backgroundImage: `url(${require('../assets/fast-food.jpg')})`}">
And that works well, i don't understand why.
In your first snippet you missed single quotes around image
Try:
url(${require('image')})
Just remember to whatever you wrap inside url(' ') must be quoted to be a valid string.
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 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')"
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.