require内の一部分に変数を挿入できない

Question

nuxt.jsでのSPAを作っているんですが、imgタグのsrcをbindして動的に切り替えたいんですがrequire('~/assets/im/＊＊＊＊.svg')内の「＊＊＊＊」部分を変数にして切り替えたいんですが、読み込まれません。

<template>
<div>
  <img :src="imageSrc">
</div>
</template>

<script>
export default{
  data(){
    return{
      imageSrc: require("~/assets/img/default.svg")
    }
  },
  methods: {
    doSomething(data){
        var self = this;
        self.imageSrc = require(\'"~/assets/img/" + data + ".svg"\');
    }
  }
}
</script>

上のdoSomething(data)内のdata部分だけを引数から代入したいのですがSyntaxErrorで読み込めません。
どのように書けばrequire('')の中でもうまく書けるでしょうか。

#追記
self.imageSrc = "require('~/assets/img/"+data.data[0].brand+".svg')";
とした時のエラーです

GET http://localhost:3000/require('~/assets/img/sample.svg') 404 (Not Found)

Answer 1

\'"~/assets/img/" + data + ".svg"\'

\' // これ必要?

Comments

[naoya.n]

self.imageSrc = "require('~/assets/img/"+data+".svg')";
にして試してみたんですが追記のようなエラーになっちゃいました。何かわかりますでしょうか。

[ozwk]

いやなんで " とか ' を無秩序に付け加えてるんですか

[naoya.n]

引数で受け取ったdata部分だけを代入して、require等の部分は常に一定なので " " をつけて文字列にしたいです。ですが文字列に ' が入ってるのでエスケープさせようと思って \ をつけたりしてるんですがうまくいきません。

[maisumakun]

self.imageSrc = require("~/assets/img/" + data + ".svg"); と書くってことですよね？＞ozwkさん

[ozwk]

「require等の部分は常に一定なので " " をつけて文字列にしたい」ってそんなこと言い出すなら
export default{
data(){
return{
imageSrc: require("~/assets/img/default.svg")
}
},

とか全部""で囲ってもいいことになるでしょ?違うでしょ?
require(...)と"require(...)"は意味が違うでしょ?

[naoya.n]

> maisumakunさん
おおおそれでできました！！ありがとうございます！！

> ozwkさん
理解できました！！requireを文字列にするなっていうめちゃ初歩でした。。ありがとうございます！

Answer 2

imageSrc: require("@/assets/img/default.svg")

これでどうでしょうか？

Comments

[naoya.n]

説明不足ですみません！imageSrcの方は読み込めてるっぽいんですが、
self.imageSrc = require(\" "~/assets/img/" + data + ".svg" \");
部分がSyntaxErrorになってしまうんです。。

[_Victorique__]

エラーの内容を全部示してもらえますか？
あと、selfじゃなくて単純にthisでいいと思うのですが。

[_Victorique__]

読み込めてないじゃないですか...

[naoya.n]

すみませんthisでも動きました。

コンソールのエラー文こちらです。
ERROR Failed to compile with 1 errors friendly-errors 13:32:14

This dependency was not found: friendly-errors 13:32:14
friendly-errors 13:32:14
* ~/assets/img/"+data+".svg in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index/rental.vue?vue&type=script&lang=js&
friendly-errors 13:32:14
To install it, you can run: npm install --save ~/assets/img/"+data+".svg

[_Victorique__]

どこにsyntax errorと出ていますでしょうか？
とにかくパスが間違っているんですよ。
回答に書いてあること試しましたか？
あと、ちゃんとファイル名とか拡張子まであっているかもう一度確認してください

[naoya.n]

self.imageSrc = require("~/assets/img/" + data + ".svg");
にすると動きました！！
エラーの読み方がおかしかったですね、、すみませんm(_ _)m

[_Victorique__]

私も
GET http://localhost:3000/require('~/assets/img/sample.svg') 404 (Not Found)
のパスが訳わからないことになっていることに気付けず申し訳ないです。
全く想定していないことをしていたのでビックリしました????

[naoya.n]

いえこんなに早く反応していただけてもうの凄いありがいです！！ありがとうございました！

Answer 3

そもそもsrcにはパス文字列を指定するものですので、require自体が必要ないのではないでしょうか。

Comments

[_Victorique__]

変数をバインドする際はrequireしないとパスがおかしくなるはずです。

[naoya.n]

require自体はうまく動いてるんですが、メソッド内のdataを代入するために、require部分を文字列として囲もうとするとSyntaxErrorになっちゃいます。