CODEWITHSUNDEEP
vue.jswebpackvuetify.js
Roman
Roman

Reputation: 323

<v-img> doesn`t work with static image. [Vuetify] Image load failed src: @/assets/img/logo.png

I have simple vuetify image tag which has to load image file from project directory, but it never works

<v-img src="@/assets/img/logo.png"></v-img>

Vue cannot load image neither with relative path, nor with absolute. src with @ and require() also don`t work. When i try to require() image, compiler fails and says 

Module not found: Error: Can't resolve './assets/logo.png' in 'D:\Projects\ExpertRestRELEASE\src\main\resources\static\js\pages'

It seems like a webpack problem, but i don`t have any idea how to solve it

Project structure:

enter image description here

webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: path.join(__dirname, 'src', 'main', 'resources', 'static', 'js', 'main.js'),
    devServer: {
        contentBase: './dist',
        disableHostCheck: true,
        compress: true,
        port: 8000,
        allowedHosts: [
            'localhost:9000'
        ],
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        modules: [
            path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
            path.join(__dirname, 'node_modules'),
        ],
    }
}

P.S url links work fine

Upvotes: 3

Views: 18000

Answers (3)

Eric Milliot-Martinez
Eric Milliot-Martinez

Reputation: 4586

Here's another way.

<template>
    <v-img height="450" :src='gif' />
</template>

<script setup lang="ts">
import gif from '@/assets/gifs/success_gif_1.gif'
</script>

Upvotes: 2

Leonid Gainar
Leonid Gainar

Reputation: 31

Try this:

<v-img :src=require("@/assets/img/logo.png")></v-img>

Upvotes: 0

AlekseyHoffman
AlekseyHoffman

Reputation: 2694

You're trying to request /assets which doesn't exist in your project, you only have /assets.img in there, so why are you requesting /assets/img/logo.png instead of /assets.img/logo.png? And why did you name this folder like this? You should probably rename it to just assets.

Also, there's another thing, look at the error, it tells you that it cannot find folder /assets inside /src/main/resources/static/js/pages because that /assets you're trying to get is 3 levels up, inside the /resources, not inside /pages

Try this:

<v-img :src="logoPath"></v-img>

...
data() {
  return {
    logoPath: path.join(__dirname, 'src', 'main', 'resources', 'assets', 'logo.png')
  }
}

You can also try these:

<v-img src="./src/main/resources/assets/logo.png"></v-img>
<v-img src="./resources/assets/logo.png"></v-img>
<v-img src="./assets/logo.png"></v-img>
<v-img :src="__dirname + '/src/main/resources/assets/logo.png'"></v-img>
<v-img :src="__dirname + 'src/main/resources/assets/logo.png'"></v-img>
<v-img :src="__static + '/assets/logo.png'"></v-img>
<v-img :src="__static + 'assets/logo.png'"></v-img>

Upvotes: 5

Related Questions