[SOLVED] Framework7 Vue Webpack Template Asset Handling

1

Hello, I am new to F7 vue.
In my src folder, I have a folder named images in which I am keeping all my app images.
I also have media folder with mp3 files.

In some component, I do something like :
Structure:
src

  • pages
    *some-component.vue
  • images

<img :src="imageLink" alt=""/>

And in my data:

imageLink: '../images/logo/white-trans.png',

Issue is: It keeps reading it as http://localhost:8081/images/logos/white-trans.png and concluding that It doesn’t exist… I am not a webpack pro, I am not sure how to solved the issue… I would like to know how to go about this.

@pvtallulah

2

Hi Max,

can you share your webpack prod config? or you are using vue cli +3?

and try by importing the image.

import imageLink from '../images/logo/white-trans.png'

...
<img :src="imageLink" alt=""/>
...

data () {
  return {
    imageLink,
    ...more data...
  }
}

try first with the import. if that dosnt work share your webpack prod conf

1 Like
3

Thanks a lot…bro! I am using vue-cli 3+ and the official vue webpack template here.
In a meantime, let me try what you suggested and revert feedback

4

@pvtallulah, I have tried out your solution, it no more brings the 404 error but then It doesnt work, I tried to console.log() the img data property and it is changes the image name in a weird manner.

<script>
import imageLink from '../images/logos/white-trans.png';

export default {
    data() {
        return {
            img: imageLink,
        }
    },
    methods: {
        doLogin() {

        }
    },
    mounted () {
        console.log(`Image Link: ${this.img}`);
    }
}
</script>

The result is: Image Link: images/white-trans.cd8199a.png

Summary

This text will be hidden

5

Ok, thats good. webpack has a plugin url-loader
you can see it config here; webpack.config.prod.js

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: 'images/[name].[hash:7].[ext]'
  }
}

and here is the doc:

basically url-loader will look for any img that matches test prop in config. And if the image is bigger tahn limit (in bytes) it will hash it and put it in images folder. so every image, no matter from where you import it will be hashed. in that way you can have several images with the same name when you are codding, and will be hashed at build time
eg:
dev, you import this images to your template:

images/main/background.jpg
images/some-page/background.jpg
images/other-page/background.jpg

prod output:

images/background.cd8199a.jpg
images/background.23as99a.jpg
images/background.e28a99a.jpg

now try by changing webpack.config.prod.js publicPath

// now
output: {
  path: resolvePath('www'),
  filename: 'app.js',
  publicPath: ''
}

// change to
output: {
  path: resolvePath('www'),
  filename: 'app.js',
  publicPath: './'
}

let me know if that helps.

1 Like
6

Oh… thanks, I tried the hack but it cause the cannot /GET

It couldn’t display the app.

7

ok, can you upload a small examlpe to github. will try it.

1 Like
8

Awesome bro… I drafted something chap chap here

9

max, just test it on my pc. windows environment. it workjs fine with default f7 template options.
with default options you get 404 on the image? or you dont see the image?. bcs at firs it was strange that i didnt get any console error. but also didnt see the image. then inspect img tag and this is what i get:

max1
max1.png972×305 49.6 KB

an extremely big image. so its there, but in native size.
then just add css and make it 70% of with. this is the result:

max2
max2.png1196×343 68.2 KB

as you can see, image path is correct both times.

if you are using osx environment let me know and i test it there.

1 Like
10

Yes… I am on OSX… Nothing can be viewed

11

@pvtallulah… All good now… Adding width to 70% really did wonders and miracles… Blessings!!! Wow!!!.. You Awesome, bro!

12

haha nice, i just test it on osx and it works fine also. just added width: 70%

max3
max3.png1085×461 150 KB

gald you could make it work

1 Like
13

Yeah, this is how things work in webpack, it automatically moves such images (and add hash to file name). Not sure it must be used with import, i use require() for such things.

That is why there is also the static folder in project, it just copies all files intact that you can also reference

1 Like