«Вам может понадобиться соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этого файла». Webpack, vue.js

mistake22

1 июля 2021 в 20:42

225

У меня проблема с изображениями в Vue.js Webpack Мой шаблон Vue.js:

$<img :src="require('${elem.titleofgame.replace(/\s+/g, '')}')}.jpg) // its image url `$ (не обращайте внимание на красную черту)

Мой package.json:

webpack.config.js:

и я получаю эту ошибку:

"Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)"

Я пытался добавить загрузчик URL, но он не работает. Как это исправить?

Источник

Поделиться Скопировать ссылку Скопировано

Ответы (2)

Michal Levý

2 июля 2021 в 09:48

Основная проблема заключается в том, что вы используете динамический импорт Webpack с полностью динамическим аргументом. Это не разрешено — см. документацию для import() — те же ограничения, описанные там, применимы и к require() , где аргументом является выражение вместо простой статической строки

Поделиться Скопировать ссылку Скопировано

Komi

2 июля 2021 в 04:19

Вам не нужен rquire внутри тега img, если эти изображения являются локальными, просто укажите путь относительно вашего текущего файла и имя файла изображения. Это должно сработать.

Также не используйте url-loader в этих случаях, url-loader преобразует изображения в base-64, если они достаточно малы, и в большинстве случаев это не будет работать для динамических материалов.

Вы также можете попробовать импортировать все эти локальные изображения, а затем написать некоторую логику, которая будет решать, какое изображение поместить в src.

как:

import bike from '@/assets/images/bike.jpg'
//in the tempalte: 
<img :src="bike" />

Это также хорошо работает, и это не будет путать vue-loader с динамическим импортом в шаблоне... если у вас есть последние доступные функции es, вы также можете использовать динамический импорт, но это зависит от вас и вашей кодовой базы. ..

Поделиться Скопировать ссылку Скопировано

tony19

2 июля 2021 в 09:35

Динамические src URL-адреса do должны быть required.

Komi

2 июля 2021 в 10:03

@tony19 tony19 Я так не думаю, URL-адреса точно не нужны или что-то в этом роде ... для локальных изображений я не уверен на 100%, но в прошлый раз, когда я пробовал, это сработало как шарм ..., если у вас есть массив URL-адресов изображений, которые вы можете перебрать и просто вставить URL-адрес в src, и он будет работать на 100%.

tony19

2 июля 2021 в 10:05

Это будет работать только для буквальных URL-адресов <img src="@/assets/logo.png">. Но динамические URL-адреса, которым требуется v-bind (например, из объединения строк), должны быть required.

tony19

2 июля 2021 в 10:12

Вот демо

mistake22

2 июля 2021 в 10:27

@tony19, я пытался сделать это с помощью require:` <img alt="Ahatintime" :src="require(./assets/Ahatintime.jpg)" class="card-img-top" > ` , но у меня возникла проблема:` GET localhost:8080/[object%20Module] 404 (не найдено)`

tony19

2 июля 2021 в 10:33

Раньше я не сталкивался с этой проблемой, так как это не проблема в проектах, созданных на основе Vue CLI. Попробуйте :src="require('./assets/Ahatintime.jpg').default".