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.
Related
I want to pass information (link) form Object, and give it as the src to image. Somehow tag doesn't see it. Even though it console log proper link and the link is working.
Object
setup() {
const state = reactive({
flashcardObject: {
linkToGraphic: 'https://static.fajnyzwierzak.pl/media/uploads/media_image/auto/entry-content/785/mobile/dog-niemiecki.jpg'}
})
return{
state
}
}
Where is the bug
<template>
<div>
<div class="ViewFlashcards">
<div class="image_div">
<img class="picture" src="{{state.flashcardObject.linkToGraphic}}"/>
</div>
</div>
</div>
</template>
Thank you for your help!
Use v-bind, like so:
<img v-bind:src="state.flashcardObject.linkToGraphic" class="picture"/>
Full code:
<template>
<div>
<div class="ViewFlashcards">
<div class="image_div">
<img class="picture" v-bind:src="state.flashcardObject.linkToGraphic"/>
</div>
</div>
</div>
</template>
v-bind allows you to bind an (HTML) attribute to a data property or just some JS code. In this case you just pass along your image URL to the src attribute of the <image>.
Note that mustache syntax, {{ something }}, does not work in HTML attributes; it only will work within elements, like <p>{{ something }}</p>.
Also, note that instead of v-bind:attribute, you can omit the v-bind part and just keep the colon, like so: :attribute. This makes it easier to bind attributes.
For more info and examples see the docs
You should require it and use : to bind the image src to the required path if the image is stored in the app :
<img class="picture" :src="require(state.flashcardObject.linkToGraphic)"/>
or :
<img class="picture" :src="state.flashcardObject.linkToGraphic"/>
if the image is hosted online.
I am having trouble displaying images in my Vue CLI project.
Here is what I have going on. This vue file accesses a json file with a few references to the individual Eyewear objects, all that works. I have references to the image I am trying to access in the json file. And with the current code, I can see the correct image reference in the browser, but it does not load the image. Is it something to do with webpack or another loader needing to load the image file?
<template>
<div>
<h1 id='callout'>Select Your Eyewear</h1>
<div id='item' v-for='item in items' :key=item.id>
<img :src='`..${item.images.frontal}`' alt='eyeware' />
<ul id='itemLIist'>
<li >
{{ item.brand }}
</li>
<li>
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import items from "../assets/eyewear.json";
export default {
name: "ItemList",
data: function() {
return {
items: items.eyewear
};
}
};
</script>
<style scoped>
</style>
I don't know this works for you or not. But in my case providing the full path of the image works for me. in your screenshot reference starting from "../assets" instead of that try something "src/assets" (Full path with out dots)
and for make this simple, first just try to hard code full path src to a image tag and see whether it's working or not.
and let me know if this works for you. =)
I am trying to develop a SPA. In this regard I am using vue.js 2 in front end and Laravel 5.5 API in back end. Now I would like to display images in front end. I wrote below code in HTML
<img :src="/images/addressObj.image"/>
Where should I put images in Laravel and how can I access that image in vue.js ?
the issue here it's that you are not using properly the :src attr, :src spects a string as value, don't let the double quotes confuse you, between the double quotes you have to place your formatted string, notice that if use :src="www.google.com/size" the img will try to find the url www.google.com/size instead www.google.com/350x150 or if you try www.google.com/{{size}} the img will try to find www.google.com/%7B%/Bsize%7D%7D (size it's a var that comes from the example below)
new Vue({
el: '#app',
data() {
return {
size: '350x150',
size2: '350x400'
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<button #click="size = '350x150'">Size 350x150</button>
<button #click="size = '350x200'">Size 350x200</button>
<!-- notice the single quotes -->
<img :src="'http://via.placeholder.com/' + size" />
<hr />
<button #click="size2 = '350x400'">Size2 350x400</button>
<button #click="size2 = '350x300'">Size2 350x300</button>
<!-- here with string interpolation -->
<img :src="`http://via.placeholder.com/${size2}`" />
</div>
Assuming that is a .vue or .js file,
<img :src="`/images/${addressObj.image}`"/>
I assume that you have correctly done the necessary stuff for the variable addressObj.
well, as u have dynamic source binding, u have to require each image.
so u just should do like that:
<img :src='require(`./images/${addressObj.image}`)'>
I think this should be simple, but I am facing some trouble on how to import and use an image in Vue single file component. Can someone help me how to do this? Here is my code snippet:
<template lang="html">
<img src="zapierLogo" />
</template>
<script>
import zapierLogo from 'images/zapier_logo.svg'
export default {
}
</script>
<style lang="css">
</style>
I have tried using :src, src="{{ zapierLogo }}", etc. But nothing seems to work. I was not able to find any example too. Any help?
As simple as:
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
Taken from the project generated by vue cli.
If you want to use your image as a module, do not forget to bind data to your Vuejs component:
<template>
<div id="app">
<img :src="image"/>
</div>
</template>
<script>
import image from "./assets/logo.png"
export default {
data: function () {
return {
image: image
}
}
}
</script>
<style lang="css">
</style>
And a shorter version:
<template>
<div id="app">
<img :src="require('./assets/logo.png')"/>
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
It is heavily suggested to make use of webpack when importing pictures from assets and in general for optimisation and pathing purposes
If you wish to load them by webpack you can simply use :src='require('path/to/file')' Make sure you use : otherwise it won't execute the require statement as Javascript.
In typescript you can do almost the exact same operation: :src="require('#/assets/image.png')"
Why the following is generally considered bad practice:
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
When building using the Vue cli, webpack is not able to ensure that the assets file will maintain a structure that follows the relative importing. This is due to webpack trying to optimize and chunk items appearing inside of the assets folder. If you wish to use a relative import you should do so from within the static folder and use: <img src="./static/logo.png">
I came across this issue recently, and i'm using Typescript.
If you're using Typescript like I am, then you need to import assets like so:
<img src="#/assets/images/logo.png" alt="">
You can also use the root shortcut like so
<template>
<div class="container">
<h1>Recipes</h1>
<img src="#/assets/burger.jpg" />
</div>
</template>
Although this was Nuxt, it should be same with Vue CLI.
These both work for me in JavaScript and TypeScript
<img src="#/assets/images/logo.png" alt="">
or
<img src="./assets/images/logo.png" alt="">
..when everything else fails, like in my case as i tried to import a placeholder i used several times in a multipaged Vuelectro-app - but this time inside a sub-subcomponent where none of the suggested solutions worked (as they usually do)..
<template>
<div id="app">
<img :src="image"/>
</div>
</template>
<script>
export default {
data() { return {image: null, ...} },
methods: {
solveImage(){
const path = require('path')
return path.join(process.cwd(), '/src/assets/img/me.jpg')
},
...
},
mounted: {
this.image = this.solveImage()
...
}
}
</script>
..should do it.
if it even works better in created-lifecycle-hook or you'd prefer to require path globally and just call
this.image = path.join(...)
in one of the hooks - you should test yourself.
I encounter a problem in quasar which is a mobile framework based vue, the tidle syntax ~assets/cover.jpg works in normal component, but not in my dynamic defined component, that is defined by
let c=Vue.component('compName',{...})
finally this work:
computed: {
coverUri() {
return require('../assets/cover.jpg');
}
}
<q-img class="coverImg" :src="coverUri" :height="uiBook.coverHeight" spinner-color="white"/>
according to the explain at https://quasar.dev/quasar-cli/handling-assets
In *.vue components, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs. For example, in <img src="./logo.png"> and background: url(./logo.png), "./logo.png" is a relative asset path and will be resolved by Webpack as a module dependency.
For Vue 3 I had to use
<template>
<div id="app">
<img :src="zapierLogo" />
</div>
</template>
<script>
import zapierLogo from 'images/zapier_logo.svg'
export default {
...
data: function () {
return {
zapierLogo
}
}
}
</script>
Both src="#/assets/burger.jpg" and src="../assets/burger.jpg" didn't seem to work.
I'm also facing same problem to display the assets image. Finally this two way work fine for me-
<img src="#/assets/img/bg1.png" />
and
<img :src="require('#/assets/img/bg1.png')" />
in my case i have a base64 image and have to import for parse the mimeType and data from the image
this how the template look like
<template>
<img
#click="openCardDetail(item)"
class="thumbnailInfo"
width="80"
height="50"
:src="getImageToShow(item.stationeryThumbnail)"
/>
</template>
Here i imported the image
import image from '#/assets/noimage.png'
then i instantiated it
data: () => ({
...
image: image,
})
then i used only if there is no data in the item
getImageToShow(item) {
if(item != null && item?.mimeType !== '' && item?.base64ImageData !== '') {
return `data:${item?.mimeType};base64,${item.base64ImageData};`
}
return `${this.image}`;
}
it solved my problem
My Vue.js component is like this:
<template>
<div>
<div class="panel-group" v-for="item in list">
...
<div class="panel-body">
<a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne">
Show
</a>
</div>
<div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel">
...
</div>
</div>
</div>
</template>
<script>
export default {
...
computed: {
list: function() {
return this.$store.state.transaction.list
},
...
}
}
</script>
When executed, there exists an error like this:
Vue template syntax error:
id="purchase-{{ item.id }}": Interpolation inside attributes has
been removed. Use v-bind or the colon shorthand instead.
How can I solve it?
Use JavaScript code inside v-bind (or shortcut ":"):
:href="'#purchase-' + item.id"
and
:id="'purchase-' + item.id"
Or if using ES6 or later:
:id="`purchase-${item.id}`"
Use v-bind or shortcut syntax ':' to bind the attribute.
Example:
<input v-bind:placeholder="title">
<input :placeholder="title">
Just use
:src="`img/profile/${item.photo}`"
If you're pulling data from an array of objects, you need to include require('assets/path/image.jpeg') in your object like I did below.
Working example:
people: [
{
name: "Name",
description: "Your Description.",
closeup: require("../assets/something/absolute-black/image.jpeg"),
},
Using require(objectName.propName.urlPath) in the v-img element did not work for me.
<v-img :src="require(people.closeup.urlPath)"></v-img>
The easiest way is too require the file address:
<img v-bind:src="require('../image-address/' + image_name)" />
The complete example below shows ../assets/logo.png:
<template>
<img v-bind:src="require('../assets/' + img)" />
</template>
<script>
export default {
name: "component_name",
data: function() {
return {
img: "logo.png"
};
}
};
</script>
The most elegant solution is save images outside Webpack. By default, Webpack compress images in Base64, so if you save images in your assets folder, that doesn't work because Webpack will compress images in base64, and that isn’t a reactive variable.
To solve your problem, you need to save your images in your public path. Usually the public path is in "public" folder or "statics".
Finally, you can do this:
data(){
return {
image: 1,
publicPath: process.env.BASE_URL
}
}
And your HTML you can do this:
<img :src="publicPath+'../statics/img/p'+image+'.png'" alt="HANGOUT PHOTO">
When to use the public folder
You need a file with a specific name in the build output
File depends on a reactive variable that can change in execution time
You have images and need to dynamically reference their paths
Some library may be incompatible with Webpack and you have no other option but to include it as a <script> tag.
More information: "HTML and Static Assets" in Vue.js documentation