I'm trying to insert a local image in my CSHTML file. The image is located in the same folder as the executable. I have tried the following, but none of these options work:
<img src="image.png" alt="Image" />
<img src="~/image.png" alt="Image" />
<img src="#Url.Content("~/image.png")" alt="Image" />
However, absolute paths and external URLs work perfectly:
<img src="C:/fake/path/image.png" alt="Image" />
<img src="www.example.com/image.png" alt="Image" />
This is how executing the app looks in cmd, I tried copying the same image to C:, C:/API and C:/API/win-x64, just in case, still nothing (there are no subfolders in C:/API/win-x64).
Does anyone know why is this happening? I don't want to use absolute paths.
To access static files in the Asp.net core, you must place them in the wwwroot folder
According to the image above, the image link is as follows
<img src="/uploadedFiles/images/img_sample_five.jpg" />
more information :
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-6.0
Related
I have I think a small issue but I can't resolve it since more than 2 hours ...
I have a VueJs application and I'm trying to display an image that came from an API.
In my register.html I have that code :
<img :src="'./assets/' +nation.drapeau"/>
When I check the browser I see the correct path './assets/images/drapeaux/AFC/Australie.png' but nothing is displayed !!!! Why ? My path is not ok ?
What I'm doing wrong ?
This is the structure of my VueJs folder
If you use dynamic src, you have to use require. It is handled by webpack and it knows to put it in dist after build.
<template>
<div>STATIC IMAGE</div>
<img src="./assets/logo.png" />
<div>DYNAMIC IMAGE</div>
<!-- <img :src="'./assets/logo.png'" /> IT DOESN'T WORK-->
<img :src="require('./assets/logo.png')" /> <!-- IT WORKS-->
</template>
Demo:
https://codesandbox.io/s/dazzling-leftpad-i3stg?file=/src/App.vue:0-281
Another source:
How to import and use image in a Vue single file component?
Try using require since it's a dynamic src
<img :src=require(`./assets/${nation.drapeau}`)/>
The response , thanks guys :
<img :src="require('#/assets/' +nation.drapeau)"/>
I have some images inside src/assets/ and in one of my component
i have this
<img
src="/src/assets/guna.jpg"
alt="Guna"
class="w-12 h-12 rounded-full"
/>
and also this :
<img
:src="`src/assets/${image}`"
alt=""
class="w-12 h-12 rounded-full"
/>
here i have bind image and passes image name in a loop and i have array of image in data which i loop in
Now when i run npm run build , only top one image that is guna.jpg is buld and get copied in dist/assets/.......jpg but not images which are bind
so how i solve it ?
you have to use require
<img
:src="require(`src/assets/${image}`)"
alt=""
class="w-12 h-12 rounded-full"
/>
In my template I am using code
<img src="#/assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
OR
<img src="./assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
It gives the following error
This dependency was not found:
* #/assets/images/logo-icon.png in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/Header.vue?vue&type=template&id=61dd7a3d
Tried using url loader in vue.config.js still the same issue
UPDATE: Solved
Simply using <img src="/assets/images/logo-icon.png" alt="homepage" class="dark-logo" /> instead of <img src="assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
Solved my problem,. and # doesn't work with the latest Vue version I guess and it wasn't also in the documentations.
have you tried with require?
For example:
<img :src="require('#/assets/images/logo-icon.png')" />
I would like to speed up my Shopify website load time by lazyloading my images. The problem is that I cannot locate the specific image files in the code in order to add the class= "lazyload" to it.
Here is what I have tried:
I have pasted this code at the top of the product-template.liquid page:
<!--Lazy Loading -->
{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>
And then adding the code: class= "lazyload" to the end of any chunk of code that I think looks like an image, but it doesn't work.
Product-template.liquid page 1 page 2 page3
Would anyone be able to help me understand where this code goes and how to identify where I need to put the code to lazyload an image?
I see that you're using <img src="..." /> . For lazyload to work, change it to <img data-src="..." />
And the better alternative is to implement native lazy loading. Just add loading="lazy" to your images and voila.
Ex: <img src="https://dummyimage.com/600x400/000/fff" loading="lazy" />
More details & a combined use with lazyload library - https://web.dev/native-lazy-loading/ & https://caniuse.com/loading-lazy-attr
In the online code editor, add the below code before close tag.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}
Add the class lazyload to images that should be lazy loaded. In addition, change the src attribute to data-src.
<img class="lazyload" data-src="image.jpg" />
Instead of
<img src="image.jpg" />
I'm passing the relative path, and using the following command to build!
ng build --prod --aot --base-href /myapp/
I get the below error 404 Resource not found error.
bkgraph.jpeg:1 GET http://localhost:8081/assets/bkgraph.jpeg 404 ()
<img src="../../assets/bkgraph.jpeg" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
To load the images you need to remove the '../../' before the assets. it should be <img src="assets/bkgraph.jpeg" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"> like this in the tomcat server.