Comments (29)
Woo Hoo!!! @LinusBorg solved it for me...it was a webpack requirement. Here is his message on the Vuejs Forum:
"You have to wrap the path in require('.. /../.....') to let webpack know that it should handle this strong as a dependency.
The url-loader that is configured for image file types (is you use our template) will then convert this path that is relative to the component file into a path that is relative to the build files, and it will copy the image to /dist/assets..."
Then I wrote back:
"Holy Scooby Snacks! It worked, thank you!!!
I'm now wondering, however, if there is a better pattern to access images dynamically. Is it possible to not have to specify the backwards travel through the file path...
require('../../assets/images/team/richard-nash.jpg')
...and simply ask for the image from the assets folder?...
@assets/images/team/richard-nash.jpg'
...so worrying about exact file path position relative to other files and folders is made irrelevant? Is that a thing that is possible, or must we use require and mentally track file paths up and down the apps directory structure?
Thank you, again, @LinusBorg ! XD
R"
Anyway, at the very least the issue is solved for now, and happy to close this one and dive deeper into webpack over the weekend. Thank you for your patience @ragingwind with a newb like myself :-)
from pwa.
Solved.
<img :src=" require(
@/assets/img/home/carousel/${item.img_src}) " />
item.img_src is the name of the image file.
from pwa.
Questions should be asked on Stack Overflow or the Vue.js forum. Here is for the issues related to the PWA template.
from pwa.
I'm re-opening this because I'm thinking the issue might not be with Vuejs, but with the Webpack configuration in the template, although I don't know for sure...
Hi @addyosmani, I'm asking you because I don't know who else put this template together and I don't know if I'm running into a bug or not (it could still easily be me being 'not smart' or something
😬 )...
Anyway, do you think anything in the Webpack config could be causing the issue stated above in the first post? The following snippet is from the webpack.base.conf file
I've been seeing mentions of this piece in other threads similar to this one, although I don't understand what's going on in the code at all, or how to fix anything. This is the file path...
Again, apologies if this is the wrong place for whatever the issue is...I have asked on the Vue JS forum as well, but so far it's been crickets over there...
from pwa.
@rchrdnsh thank you for opening and reopening this issue. you just saved my arse (one year later) on a problem I spend 30min figuring out. thanks a lot!!! 👍
from pwa.
Using: Vue 2.0 + Browserify
I had to put the full path to the image and use computed function
Path of Images:
- www/images/lfpinpad/error.png
- www/images/lfpinpad/offline.png
- www/images/lfpinpad/online.png
Path of Component
- www/src/components/app/AppTopMenu.vue
<template>
<img v-bind:src="imageSrc" />
</template>
export default {
data() {
return {}
},
computed: {
imageSrc: function () {
return './../../../images/lfpinpad/' + Shared.websocket.websocket_image_status
}
}
}
Where Shared.websocket.websocket_image_status is one of:
- offline.png
- online.png
- error.png
from pwa.
I also met the same problem. The solution given by @rchrdnsh solved the problem.
that is:
...
<img :src='img'>
...
const img = require('../../assets/images/team/richard-nash.jpg')
But I also found another solution, to edit the file webpack.config.js, change the chunkhash to hash
{
test: /\.(png|jpg|gif|svg)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash:5]'
}
}]
}
from pwa.
After spending more that four hours looking for the solution it finally worked
Using require() in my array
Thanks to this community
from pwa.
Thanks @rchrdnsh. Three years later this "feature" still persists in webpack and Vue.
In a Vue component just used:
<template>
<div>
<img :src="image"/>
</div>
</template>
...
<script>
export default {
data: () => {
return {
image: require('../assets/img/thumbnail.jpg'),
}
}
}
</script>
And it works like a charm.
from pwa.
Solved.
<img :src=" require(
@/assets/img/home/carousel/${item.img_src}) " />
item.img_src is the name of the image file.
it also works for me. thx
<img
:src="require(`@/assets/images/${item.img}`)"
:alt="item.title"
/>
from pwa.
I hope it helps you
- https://github.com/vuejs-templates/pwa/blob/master/docs/static.md and
- https://webpack.js.org/loaders/url-loader/
- http://vue-loader.vuejs.org/en/
as you said, it's relevant that how to use webpack and configurations not vue-template. I would give a recommendation you to refer to many of references and guides in the net. templates generated by vue init
has a very basic skeleton structure so you should understand that it makes better one
It looks that url-loader can't fine image resource properly
from pwa.
my solution is using computed
export default {
props: {
article: {
type: Object
}
},
computed: {
url: function() {
return `/_nuxt/${this.article.image}`;
}
},
}
then use it normally
<img v-bind:src="url" alt="">
from pwa.
so the solution is <img :src="require(
PATH/${item.img_src)"/>
path can be different in your particular case. Example in my case it was ../assets/img/portfolio.
Note: Remember to put `` not '' inside require. Because github hides them considering its code.
from pwa.
Thanks @rchrdnsh. Three years later this "feature" still persists in webpack and Vue.
In a Vue component just used:<template> <div> <img :src="image"/> </div> </template> ... <script> export default { data: () => { return { image: require('../assets/img/thumbnail.jpg'), } } } </script>
And it works like a charm.
Hello @cornesmith! I'll try to use that but an error occurs that says: require is not defined. I'm just a beginner and I'm using vite. And if I'm correct, vite do not use webpack.
from pwa.
I can get it to work outside of the vue-pwa template, tho, so i wondered if it was a template problem. I will ask on the forum as well :-)
from pwa.
v-binding
is not related to vue-pwa-tempalte. It's a general question how to make it with vue.je. Vue.js already has great place for this https://forum.vuejs.org/. You look find the right place to ask of this https://forum.vuejs.org/t/v-binding-an-image-from-an-object-to-an-img-src-not-working-in-vue-pwa-template/12754
from pwa.
ok, I'll close this one and wait for help there then...
from pwa.
Hey the require('path') worked for me too. I'm new to Vue and find this one odd, what if the image is messing, this would be a compile error I believe.
from pwa.
Remove relative path and user basUrl
data() {
return {
baseUrl:window.location.origin
}
},
from pwa.
Hi,
i tried all the solution given but it still dosen't work for me.
I tried loading the images by using require in v-bind:src but nothings happen.
json file:
[ { "title": "Accueil", "content": "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. ées 1500, quand un imprimeur", "img_src": "../../assets/img/home/carousel/navy_seals_1.jpg" }, { "title": "Accueil", "content": "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. ées 1500, quand un imprimeur", "img_src": "../../assets/img/home/carousel/navy_seals_1.jpg" },
File import
<script> import json from '../../data.json' export default { name: "store", data(){ return { data:json} }} </script>
Loop v-for for display
<div class="iteam_card_container"> <b-col ><div v-for="item in data" class="item_card"> <img :src="item.img_src" /> <div> <b-button class="card_btn" :variant="primary">Ajouter au panier</b-button> <p class="title">{{ item.title }}</p> <p class="card_content">{{ item.content}}</p> </div> </div></b-col> </div>
Thanks for help.
from pwa.
Woo Hoo!!! @LinusBorg solved it for me...it was a webpack requirement. Here is his message on the Vuejs Forum:
"You have to wrap the path in require('.. /../.....') to let webpack know that it should handle this strong as a dependency.
The url-loader that is configured for image file types (is you use our template) will then convert this path that is relative to the component file into a path that is relative to the build files, and it will copy the image to /dist/assets..."
Then I wrote back:
"Holy Scooby Snacks! It worked, thank you!!!
I'm now wondering, however, if there is a better pattern to access images dynamically. Is it possible to not have to specify the backwards travel through the file path...
require('../../assets/images/team/richard-nash.jpg')
...and simply ask for the image from the assets folder?...
@assets/images/team/richard-nash.jpg'
...so worrying about exact file path position relative to other files and folders is made irrelevant? Is that a thing that is possible, or must we use require and mentally track file paths up and down the apps directory structure?
Thank you, again, @LinusBorg ! XD
R"
Anyway, at the very least the issue is solved for now, and happy to close this one and dive deeper into webpack over the weekend. Thank you for your patience @ragingwind with a newb like myself :-)
Hi...
Can you please explain how you used require???
from pwa.
A similar problem has been encountered in a recent project. After reading your article, it has been resolved. Thank you.
The problem is: ”img src='../static/assest/images/index/inst_logo01.png' /> “There is no problem with introducing images.
"img :src='../static/assest/images/index/inst_logo01.png' /> "The src attribute written by the method cannot be parsed.
Solution: "img src='../../assest/images/index/inst_logo01.png' />"
from pwa.
thank you @s4n4s i solved with your solution:
item.img_src is the name of the image file.
but i need add backtick() to solve it like this : <img :src=" require(
@/assets/img/home/carousel/${item.img_src}`) " />
from pwa.
Yes require also works for me. Thanks
from pwa.
worked for me too, thanks for this!
from pwa.
After spending more that four hours looking for the solution it finally worked
Using require() in my array
Thanks to this community
Thank you~ This solved it for me. @johnSoneka
from pwa.
Solved.
<img :src=" require(
@/assets/img/home/carousel/${item.img_src}) " />
item.img_src is the name of the image file.
I am facing this issue
./src/components/Home.vue?vue&type=template&id=8dc7cce2 (./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/Home.vue?vue&type=template&id=8dc7cce2)
Module not found: Error: Can't resolve '@/assets/image/${item.imageArray}' in 'C:\Users\TFVFGHGFHJG\Desktop\vue-projects\allevahomecare\src\components'
from pwa.
Using the require('') helped me solve the problem.
Thank you
from pwa.
guys if u are using vite
// Function to get the URL of an image
const getImageUrl = (filename) => {
// Correct usage with import.meta.url
return new URL(../assets/img/${filename}
, import.meta.url).href;
}; and acess in :src="getImageUrl(movie.poster)" works
from pwa.
Related Issues (20)
- Suggestion: serviceWorker.register path and routes issue HOT 2
- Offline support when using html5 history api HOT 1
- HELP: VueX and no-param-reassign HOT 3
- Active in Development? HOT 2
- SPA app using angular not working offline for pages other than Index
- Problem when importing firebase-messaging-sw to SW service worker. HOT 2
- Tapable is deprecated in Webpack 4 HOT 4
- offline caching options for pwa HOT 1
- Step missing in installation?
- Cloudflare's Under Attack Mode breaks Service Worker
- how i dynamically change my manifest.json file HOT 1
- How to disable "Add to Homescreen". HOT 1
- Failed to register a ServiceWorker
- Uncaught TypeError: Cannot read property 'call' of undefined
- PWA themeColor is not picking value from manifest.json file HOT 2
- Service Worker Error TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
- Failed to register a ServiceWorker when app run on network address
- POST API not calling on mobile [Chrome v72.0.*] HOT 1
- Uncaught (in promise) DOMException
- Service Worker is not working as expected in react typescript
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pwa.