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)"/>
Related
I'm creating a movie DB app with vue and I'm trying to output an image source that is being fetched from an API. For some reason the output of the src is not being rendered as it should in the app. It prints the string {{movie.Poster}}.
I'm obviously not using v-bind in the right way. So any ideas on how I would print the path to the poster in the right way?
<template>
<div class="my-10">
<h2 class="text-bold">{{ movie.Title }}</h2>
<img v-bind:src="'{{movie.Poster}}'"/>
</div>
</template>
You need to use
<img :src="movie.Poster"/>
because {{ .. }} is template literals. So it output a string.
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'm having a problem with my project not finding the path to my png images. I know the path is correct because if I use a basic hard coded src="../assets/die1.png", it works fine. The problem is I need them to changed based on other data.
I keep getting the error: Cannot find module '../assets/die1.png'
COMPONENT:
<template>
<div class="DiceComponent col-3 bg-primary">
<img v-if="die.output != ''" :src="require(die.output)" alt="error loading image" />
</div>
</template>
NOTE: die.output == "../assets/die1.png" and this is confirmed in the Vue devtool.
EDIT: This is currently what I get when it tries to load.
For readability you can change your output variable to:
die.output == require('../assets/die1.png')
or
die.output == require('#/assets/die1.png')
And then
<template>
<div ...>
<img ... :src="die.output" ... />
</div>
</template>
I am getting some error in your store functions that I can solve now so I focused on the image question. As you are working with static files, I've moved them to public folder and have made a simple rollDice function:
rollDice() {
let rng = Math.floor(Math.random() * 6);
this.diceTemp = `./die${rng+1}.png`
},
then:
<Die :die="diceTemp" />
inside the component:
<img :src="die" />
and this works fine! Somethings to consider:
If you are using stores you can use die values inside your Die component and avoid using nested values (die.output) props (vuejs.org/v2/guide/reactivity.html)
Replace what you have now with
<template>
<div ...>
<img ... :src="require(`${die.output}`)" ... />
</div>
</template>
It was hard but I found a way
try this:
let imgName = "logo-blue.svg";
getLogo(imgName) {
const partName = imgName.split("logo-")[1];
return require("../img/logo-" + partName);
}
I don't know why, but if you do return require("../img/" + imgName); it doesn't work, just with the split it's working.
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.
What do I have to do to use a nuxt-link as an image?
When I display an image in Vue, I usually do:
<img src="~assets/icons/filterLinkButton.svg">
but when I do the same with a nuxt-link, the path to the file does not get evaluated.
# this is not working
<nuxt-link
tag="img"
src="~assets/icons/filterLinkButton.svg"
to="/locations">
</nuxt-link>
What can I do to solve this?
EDIT:
It works though if I do:
<template>
<nuxt-link
:src="image"
tag="img"
to="/locations">
</nuxt-link>
</template>
<script>
import image from '~/assets/icons/filterLinkButton.svg'
export default {
data() {
return {
image: image
}
}
}
</script>
You can do without a variable in data.
# this is working
<nuxt-link
tag="img"
:src="require('~/assets/icons/filterLinkButton.svg')"
to="/locations">
</nuxt-link>
According to this link, the tag prop is deprecated in vue-router 4 and should be replaced with v-slot. So arkadij_ok's answer would now look like this:
<nuxt-link
v-slot="{navigate}"
to="/locations"
>
<img
:src="require('~/assets/icons/filterLinkButton.svg')"
role="link"
#click="navigate"
/>
</nuxt-link>
I have used an image as a nuxt-link by placing the image inside of the nuxt-link tag.
a screen shot of a nuxt-link with an img
The html viewed with chrome dev tools
Well according to the documentation if you're using webpack you can use that alias (~assets) inside your css files, but apparently you need to use the ~/ version on your template, also take a look at the approach bellow using the static folder I think that suits you better since the asset you used in your question can be placed in the static folder and get rid of the alias