質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

Q&A

解決済

3回答

1889閲覧

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

naoya.n

総合スコア26

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

0グッド

0クリップ

投稿2019/04/09 04:06

編集2019/04/09 04:35

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

vue.js

1<template> 2<div> 3 <img :src="imageSrc"> 4</div> 5</template> 6 7<script> 8export default{ 9 data(){ 10 return{ 11 imageSrc: require("~/assets/img/default.svg") 12 } 13 }, 14 methods: { 15 doSomething(data){ 16 var self = this; 17 self.imageSrc = require(\'"~/assets/img/" + data + ".svg"\'); 18 } 19 } 20} 21</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)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

\'"~/assets/img/" + data + ".svg"\'
\' // これ必要?

投稿2019/04/09 04:35

ozwk

総合スコア13512

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

naoya.n

2019/04/09 04:36 編集

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

2019/04/09 04:38

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

2019/04/09 04:42

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

2019/04/09 04:44

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

2019/04/09 04:48

「require等の部分は常に一定なので " " をつけて文字列にしたい」ってそんなこと言い出すなら export default{ data(){ return{ imageSrc: require("~/assets/img/default.svg") } }, とか全部""で囲ってもいいことになるでしょ?違うでしょ? require(...)と"require(...)"は意味が違うでしょ?
naoya.n

2019/04/09 04:53

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

0

vue

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

これでどうでしょうか?

投稿2019/04/09 04:19

_Victorique__

総合スコア1392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

naoya.n

2019/04/09 04:30

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

2019/04/09 04:32

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

2019/04/09 04:40

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

2019/04/09 04:45

すみません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__

2019/04/09 04:47

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

2019/04/09 04:55

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

2019/04/09 05:04

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

0

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

投稿2019/04/09 04:16

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_Victorique__

2019/04/09 04:18

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

2019/04/09 04:31

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問