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')" />
Related
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
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"
/>
How to add a link to an image properly using nuxt?
I am currently using tag="img" but it seems tag prop is deprecated. So is there a better way?
<nuxt-link
tag="img"
:src="require('~/assets/ProfitApp-icon.png')"
height="55"
alt="logo"
class="px-3"
to="/"
/>
WARN [vue-router] 's tag prop is deprecated and has
been removed in Vue Router 4. Use the v-slot API to remove this
warning:
https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.
Why not using a slot like described here: Enclosing a router-link tag in an image in vuejs
<nuxt-link to="/" class="px-3">
<img
:src="require('~/assets/ProfitApp-icon.png')"
height="55"
alt="logo"
/>
</nuxt-link>
many of the FilePond property seem to not show an effect, but there are even some that render the component unusable. tried on codepen with the default example.
As soon as I add the following line:
stylePanelLayout='compact circle'
to the component it doesn't react anymore to file selects
<template>
<div id="app">
<file-pond
name="test"
ref="pond"
allow-multiple="true"
accepted-file-types="image/jpeg, image/png"
v-bind:files="myFiles"
stylePanelLayout='compact circle'
/> </div>
</template>
you can try urself by adding this line to the demo from FilePond:
https://codesandbox.io/s/github/KimGenius/Vue-FilePond-Live-Demo/tree/master/?from-embed
please set allow-multiple to false to fix the issue. Might not be clear from the docs that this is necessary.