Как загрузить картинку в VUE3?

Question

[sanek3275]

Здравствуйте, Возникла такая проблема. Есть список картинок, которые должны загружаться в зависимости от того название которое им пришло в компонент. Но почему-то картинка не загружается. Я сделал стандартный и понял что. Vue сам создает путь до картинки, можно ли как-то сделать так чтоб vue переделывал пути из массива. И загружал их img

<template>
	<template v-if='procent != 0 || procent != false'>
		<div class="set__item">
			<div class="set__icon">
				<img :src="src" />
				<img src="../assets/logotip/html.svg" />
			</div>
			<div class="set__detail">
				<div class="set__meta">
					<div class="set__name">
						<h4 class="small_title">{{ title }}</h4>
						<template v-if='years != 0 || years != false'>
							<p class="skill-set__year">{{ years }} year</p>
						</template>
					</div>
					<p class="set__high">{{ procent }}
						<span class="skill-set__ratio"> %</span>
					</p>
				</div>
			</div>
		</div>
	</template>
</template>

<script>
export default {
	name: 'NaVik',
	props: {
		procent: Number,
		title: String,
		years: Number,
	},
	data() {
		return {
			Werts: [],
		};
	},
	async mounted() {
		const brandImgs = {
			'1C Bitrix': '@/assets/logotip/1c_bitrix_logo.svg.png',
			'Wordpress': '../assets/wordpress-logotype-wmark.png',
		};
		this.Werts = brandImgs[this.title];
	},
}

</script>

Answer 1

[Aetae]

Подстановка путей к динамическим ассетам осуществляется на этапе сборки. Со строками из js сборка напрямую не работает.

1. Ты можешь сделать так:

import Wordpress from '../assets/wordpress-logotype-wmark.png';
import Bitrix from '@/assets/logotip/1c_bitrix_logo.svg.png';
const brandImgs = {
  '1C Bitrix': Bitrix,
  Wordpress,
};

По сути сделать руками то, что делает сборщик vue с src под капотом.

2. Ты можешь просто сразу положить иконки в папку /public и указывать не относительные пути в рамках проекта, а абсолютные от корня:

const brandImgs = {
  '1C Bitrix': '/logotip/1c_bitrix_logo.svg.png',
  'Wordpress': '/logotip/wordpress-logotype-wmark.png',
 };

3. Ты можешь использовать динамический import().

4. Ты можешь использовать import.meta.glob в vite или require.context в webpack.
(Тут стоит помнить, что все ограничения упомянутые для п.3 применимы и здесь.)

Comments

[sanek3275]

Большое спасибо, использовал 2 вариант.