vue.jsによるv-forで相対パス内のファイルの場所を指定しリスト形式で画像を表示

やりたい事
・v-forを使用してurlの指定や画像のファイルを指定するための相対パスを設定すること。

わからない部分
・v-forを使用してdataプロパティで渡したリスト要素でurlができず下記のようなエラーが出ている。

vue.js:634 [Vue warn]: Error compiling template:invalid expression: Unexpected token '.' in
invalid expression: Unexpected token '{' in img({{item}})
invalid expression: Invalid regular expression: missing / in /{{item[0]}}
invalid expression: Invalid regular expression: missing / in/{{item1[0]}}

ファイルは下記のように保存
--- img -- 1.jpg~2.jpg
|- slick --slick用のファイル
|- templates -- layout.html ,index.html ,top.html
|- static -style.css
|- app.py

flaskでアクセスを管理していますがエラーは全部vue.jsの方で'/'を使用したurlや相対パスの指定でおかしくなる模様。

html
1layout.html
2
3<!doctype html>
4<html lang="ja">
5<head>
6    <title>{% block title %}{% endblock %}</title>
7    <meta charset="utf-8"/>
8    <meta name="viewport" 
9        content="width=device-width, initial-scale=1, shrink-to-fit=no">
10    <link rel="stylesheet" 
11        href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
12    <link rel="stylesheet" href="../static/style.css">
13    <link rel="stylesheet" href="../slick/slick.css">
14    <link rel="stylesheet" href="../slick/slick-theme.css">
15    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
16    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
17    
18</head>
19<body>
20    <div  class="container">
21        <h1 class="display-3" style="font-family: fantasy;">
22            {% block headline %}{% endblock %}
23        </h1>
24        <div>
25            {% block content %}{% endblock %}
26        </div>
27        <div class="text-right">
28            {% block footer %}{% endblock %}
29        </div>
30    </div>
31    <script src="../slick/slick.min.js"></script>
32    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
33    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
34</body>
35</html>

html
1index.html
2
3{% extends 'layout.html' %}
4
5{% block titele %}
6{{title}}
7{% endblock %}
8
9{% block headline %}
10{{title}}
11{% endblock %}
12{% block content %}
13    <div class="row">
14        <div class=" col-lg-9 col-md-12 border contents ">
15            {% block container %}{% endblock %}
16        </div>
17        <div class="p-1 col-lg-3 col-md-12">
18            <div id="side"class="side_decolation">
19                <side_ber/>
20            </div>
21            {% raw %}
22                <script type="text/x-template" id="side_ber-template">
23                    <div class="side_decolation">
24                        <a class="hover9 text-white" href="/" ><h2>MENU 一覧</h2></a>
25                        <div v-for="item in Menu_data">
26                            <ul class="list-group">
27                                <li class=" p-2 list-group-item bg-dark rounded-0" style="clickable-row">
28                                    <a class=" hover9 text-white"  style="text-decoration: none; clickable-row" :href="/{{item[0]}}">{{item[1]}}</a>
29                                </li>
30                            </ul>
31                            <ul v-for="item1 in item[2]" class="list-group">
32                                <li  class=" p-1 list-group-item rounded-0" style="clickable-row">
33                                    <a class="hover9 text-dark" style="text-decoration: none;" :href="/{{item1[0]}}">{{item1[1]}}</a>
34                                </li>
35                            </ul>
36                        </div>
37                    </div>
38                </script>
39            {% endraw %}
40        </div>
41    </div>
42    <script>
43        Vue.component('side_ber',{
44            template:'#side_ber-template',
45            /*コンポーネント内のdataは関数でないといけないのでこの形*/
46            data:function(){
47                return{
48                    Menu_data:[["book","書籍",[["norbel","小説"],["it_book","IT参考書"],["etc","その他"]]],
49                               ["program","プログラム",[["html","HTML"],["css","CSS"],["javascript","Javascript"],["Vue_js","Vue.js"],["python","python"],["alchemy","SQLalchemy"]]]]
50                }
51            },
52            methods:{
53                
54            },
55            /*createdプロパティ←コンポーネントの初期化処理*/
56            
57            
58        });
59
60        new Vue({
61            el:'#side'
62        })
63               
64    </script>
65    
66    
67{% endblock %}
68
69{% block footer %}
70copyright hiroki-kondo2021
71{% endblock %}

html
1{% extends 'index.html' %}
2
3{% block container %}
46
5    <div id="top">
6        <top_content/>
7    </div>
8    5
9
10    {% raw %}
11        <script type="text/x-template" id="top_content-template">
12            <div>
13                <div v-for="item in img_url">
14                    <ul class="slider" v-model=>
15                        <li><img :src="../img/{{item}}.jpg'" v-bind:alt="img({{item}})"></li>
16                    </ul>
17                </div>
18            </div>
19        </script>
20    {% endraw %}
21    <script>
22        Vue.component('top_content',{
23            template:'#top_content-template',
24            /*コンポーネント内のdataは関数でないといけないのでこの形*/
25            data:function(){
26                return{
27                    img_url:[1,2,3,4,5,6]
28                }
29            },
30            methods:{
31                
32            },
33            /*createdプロパティ←コンポーネントの初期化処理*/
34            
35            
36        });
37        
38
39        new Vue({
40            el:'#top'
41        })
42        //下記は画像のスライド用の関数（slickのやつ
43        /*$(document).ready(function () {
44            $('.slider').slick({
45                autoplay: true
46            });
47        });*/
48    </script>
49    
50{% endblock %}

わかる方いましたらご助力を宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

変数の埋め込み方の記述が違います。jsと同じように$を使ってください。
また、画像はキャッシュを持つのでメソッドで制御した方が無難です。

あと、マスタッシュ{{hoge}}はメソッドの引数に代入されることはないですよ。あくまでマスタッシュはコンポーネント内のテンプレートに変数を代入するために用いるものです。

vue
1<img :src="imagePath(item)" v-bind:alt="img(item)">
2
3 methods:{
4    imagePath(item){
5         require(`@/assets/img/${item}.jpg`);
6    },
7 },

投稿2021/08/23 00:40

FKM

総合スコア3647

con2319

2021/08/23 14:57

なるほど～つまりテンプレート内では値の受け渡しだけで値を加工処理したいのであれば methodsプロパティや他のプロパティで！ってことですね。わかりやすく教えていただきましてありがとうございます。とても勉強になりました。あと2点質問をお答えいただけないでしょうか？ ①requireはNode.jsでしか使えないため今回は相対パスで代用したのですが　requireメソッドをサーバーサイド以外で使用する方法はあるのでしょうか？ ②相対パスを通すうえでtop.html→画像ファイルで相対パスで指定したのですがnot foundエラーが　出てしまい、画像ファイルがあるimgフォルダをstaticフォルダの下に入れたうまく通すことができ　画像表示されました。これは何か理由がるのでしょうか？以上です。わかる範囲で教えていただければ嬉しいですよろしくお願い致します。